动态Axios的配置步骤详解


Posted in Javascript onJanuary 12, 2018

前言

以前写Vue项目的时候都是使用vue-resource做为项目ajax库,在11月份的某一天尤大微博的更新表示ajax的库应该是通用的,放弃了对vue-resource的技术支持,推荐使用axios。

推荐使用Vue-cli工具来创建和管理项目,就算刚开始不熟悉,用着用着便可知晓其中的奥妙。前一段时间官方所推荐的数据请求插件还是Vue-resource,但现在已经变了,变成了Axios,不用知道为什么变了,反正这个用起来比那个好一些,用就是了,下面是一些封装axios请求的一些经验,不对之处,还望多多指教!

方法如下

一、创建文件,Vue项目初始化之后,在src目录下再创建一个util工具文件夹,一般就是用来存放一些封装的函数方法,现在让我们在util文件目录下创建一个http.js文件,封装axios方法。

二、直接上代码(常规版),代码中有详细的注释

import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置
axios.defaults.timeout = 5000; //设置超时时间
axios.defaults.baseURL = 'http://localhost:4000/api/v1/'; //这是调用数据接口
// http request 拦截器(所有发送的请求都要从这儿过一次),通过这个,我们就可以把token传到后台,我这里是使用sessionStorage来存储token等权限信息和用户信息,若要使用cookie可以自己封装一个函数并import便可使用
axios.interceptors.request.use(
 config => {
  const token = sessionStorage.getItem("token"); //获取存储在本地的token
  config.data = JSON.stringify(config.data);
  config.headers = {
   'Content-Type':'application/json' //设置跨域头部,虽然很多浏览器默认都是使用json传数据,但咱要考虑IE浏览器。
  };
  if (token) {
   config.headers.Authorization = "Token " + token; //携带权限参数
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 }
);


// http response 拦截器(所有接收到的请求都要从这儿过一次)
axios.interceptors.response.use(
 response => {
//response.status===401是我和后台约定的权限丢失或者权限不够返回的状态码,这个可以自己和后台约定,约定返回某个自定义字段也是可以的
  if(response.status == 401) {
   router.push({ //push后面是一个参数对象,可以携带很多参数,具体可以去vue-router上查看,例如query字段表示携带的参数
    path: '/login' 
   })
  }
  return response;
 },
 error => {
  return Promise.reject(error.response.data)
 });

export default axios;

/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}) {
 return new Promise((resolve, reject) => {
  axios.get(url, {
   params: params
  })
  .then(response => {
   resolve(response.data);
  })
  .catch(err => {
   reject(err)
  })
 })
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

/**
 * patch 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

/**
 * put 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

三、(动态版),axios的拦截器不是必要的,不是每个项目都需要,而且headers里面的Content-Type和Authorization不止一种,这时就需要使用另一种方法。

util/http.js

import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置和拦截器都不用了,这里我使用了一个动态配置数据请求地址,在App.vue中,代码在下面,这个也不是必须的。
//^_^下面都设置一个默认的头部,使用的时候可以传入数据覆盖^_^,例如使用fetch(GET)方法时,没有请求数据,但是请求头有变化,则应写成 fetch("地址", {}, {"这里写头部的内容"}) 记住没数据用一个空对象占位置
/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}, headers = {
 'Content-Type': 'application/json', //设置跨域头部
 "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
}) {

 return new Promise((resolve, reject) => {
  axios.get(url, {
   params: params,
   headers: headers
  })
  .then(response => {
   resolve(response.data);
  })
  .catch(err => {
   reject(err.response)
  })
 })
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

/**
 * patch 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

/**
 * put 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

App.vue(这是在src目录下的程序入口文件)

<template>
 <div id="app">
 <router-view/>
 </div>
</template>

<script>
import axios from 'axios';
let protocol = window.location.protocol; //协议
let host = window.location.host; //主机
let reg = /^localhost+/;
if(reg.test(host)) {
 //若本地项目调试使用
 axios.defaults.baseURL = 'http://10.0.xx.xxx:xxxx/api/';
} else {
 //动态请求地址
 axios.defaults.baseURL = protocol + "//" + host + "/api/";
}
axios.defaults.timeout = 30000;
export default {
 name: 'app',
 axios //这里记得导出,若请求地址永久固定一个,则就按照`普通版`配置一个baserURL就可以了
}
</script>

<style lang="scss"> //这里我使用的是scss
@import '~@/style/style'
</style>

总结

常见问题

在使用动态版时,为什么称为动态呢,是因为访问地址和请求地址是同一个地址可端口号,例如我通过http://www.cmgos.com(默认端口80)访问项目,那么我的baseURL会自动的变为http:www.cmgos.com:80/api/,这么做的原因是当某一天项目迁移或者http改为https时,不用你再去更改请求地址,程序自动就完成了
数据请求地址配置不正确?如果你配置了baseURL,那么你封装的函数在使用时仅需传入基于baseURL的请求地址,例如传入login/那么请求地址会自动变为http:www.cmgos.com:80/api/login/,若未配置,那么可以直接传入整个请求地址

注意事项

在使用动态版时,由于没有使用拦截器,所以下面封装的函数在返回错误的时候需要写成err.response.data来获取返回的数据,但我写的是err.response,因为这样可以拿到(status)状态码等信息,若不需要判断返回的状态码,则改为err.response.data便可

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
论JavaScript模块化编程
Mar 07 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
vue.js实例todoList项目
Jul 07 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 #Javascript
使用JS获取SessionStorage的值
Jan 12 #Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 #Javascript
web前端vue filter 过滤器
Jan 12 #Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 #Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 #Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 #Javascript
You might like
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
js的with语句使用方法
2007/09/21 Javascript
奇妙的js
2007/09/24 Javascript
javascript 关闭IE6、IE7
2009/06/01 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
独特的python循环语句
2016/11/20 Python
Python通过future处理并发问题
2017/10/17 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
详解python Todo清单实战
2018/11/01 Python
python机器人运动范围问题的解答
2019/04/29 Python
python调用其他文件函数或类的示例
2019/07/16 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
python def 定义函数,调用函数方式
2020/06/02 Python
python的launcher用法知识点总结
2020/08/07 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
业务部主管岗位职责
2014/01/29 职场文书
护士个人自我鉴定
2014/03/24 职场文书
药店采购员岗位职责
2014/09/30 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
青年教师个人总结
2015/02/11 职场文书
银行工作心得体会范文
2016/01/23 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书