Axios使用笔记

Axios，vue官方推荐的Ajax插件。

安装

//使用npm下载
sudo cnpm install axios --save

配置

导入

在main.js中进行配置。

//导入
import axios from 'axios';

//挂载到原形上，设置为全局变量，可通过this.axios调用。
Vue.prototype.axios = axios

//或者如下配置，通过this.$http调用。
//加$，为了与我们定义的数据、方法、计算属性名称产生冲突
Vue.prototype.$http = axios

使用 import axios from 'axios';，导入axios。from后边的名为axios，以package.json文件中的为准。

拦截器

请求拦截器、响应拦截器，在Ajax发送之前与接收到响应之后进行一些处理，可使用拦截器。使用方法，见下边的案例。

发起Ajax请求

注意，get、delete请求使用params设置参数。post、put、patch请求使用data设置参数。

//在vue文件中使用：

//设置全局URL
this.axios.defaults.baseURL = 'http://qsdbl.site:8080/myinterface';


// 发送 POST 请求
this.axios({//建议axios接收的参数只添加一个config对象即可（清晰明了），包含method、url、responseType等等属性，还可添加自定义属性例如下边的isShowProgress
  method: 'post',
  //设置了全局URL，会拼接到此url前边，故可只写后边的url即可。若此处写完全url（即带上http://前缀的完全地址）则全局URL不会拼接在前边
  url: '/user/12345',
  //默认的响应数据类型为json，此处可不写json。其值可以是 "arraybuffer", "blob", "document", "json", "text", "stream"等。
  responseType:'json',
  data: {
    //请求携带的数据
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  isShowProgress: false//自定义config属性
}).then(()=>{
    //ajax请求正常响应的回调
}).catch(()=>{
    //ajax请求异常的回调
});


//注意：get请求携带数据使用params，post请求携带数据使用data

更多笔记，见菜鸟教程。

案例

某项目中axios的配置如下（main.js文件）：

• 设置全局URL。
• 使用请求拦截器，将登录成功后获得的token添加到HTTP请求的header中的Authorization字段（自定义的字段）。
• 使用请求拦截器，启用进度条插件（NProgress）。
• 使用响应拦截器，关闭进度条插件。
• 使用响应拦截器，检查token是否已失效（根据后台返回的，位于header中的code字段。自定义的字段）。
• 将axios挂载到VUE原形上，后续通过$http调用axios发起Ajax请求。
• 注意：要使用elementui的弹窗组件（响应拦截器中有使用到），需要保证下边的配置在elementui的import之后。

//Ajax请求
import axios from 'axios';
//axios全局配置
// axios.defaults.withCredentials = true; //跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。
axios.defaults.baseURL = 'http://localhost:8090/cashier_system/v1'; //设置全局URL
// axios.defaults.headers.post['Content-Type'] = 'application/json';
// axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
// 在request（请求）拦截器中, 添加请求头信息Authorization（自定义的，用于后端鉴权）
// 请求在到达服务器之前，先会调用use中的这个回调函数
axios.interceptors.request.use(config => {
  NProgress.start(); //进度条
  if (window.sessionStorage.getItem("token") != null) {
    config.headers.Authorization = window.sessionStorage.getItem('token'); // 为请求头对象，添加Authorization字段
  }
  return config; //在最后必须 return config
})
// response（响应）拦截器中,  隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done();
  if (config.headers.code == "401") {
    //判断当前页是否有el-message标签，如果没有则执行弹窗操作
    if (document.getElementsByClassName('el-message').length === 0) {
      elementui.MessageBox({ //组件在前边导入为“elementui”
        title: '提示',
        message: "您的登录状态已失效, 请重新登录！"
      }).then(() => {
        window.sessionStorage.clear();
        router.push("/login");
      })
    }
  }
  return config;
})
//挂载到原形上，设置为全局变量，可通过this.$http调用。
//加$，为了与我们定义的数据、方法、计算属性名称产生冲突
Vue.prototype.$http = axios

扩展

给NProgress动画增加条件判断，控制是否显示。

//拦截器中添加如下判断，默认在发起请求时显示进度条
//1.默认开启
//请求拦截
if (config.isShowProgress || config.isShowProgress === undefined) {
	NProgress.start(); //进度条
}

//响应拦截
if (config.isShowProgress || config.isShowProgress === undefined) {
	NProgress.done();
}

//2.默认不开启
//请求拦截
if (config.isShowProgress) {
	NProgress.start(); //进度条
}

//响应拦截
NProgress.done();



//当不需要显示进度条时，请求的config对象中添加isShowProgress属性即可（isShowProgress = false）
this.$http({
	method: 'get',
	url: `/accounts/icon`,
	responseType: 'text',
	params: {
		username: this.loginForm.username
	},
	isShowProgress: false,//不显示progress动画（默认开启）
	//isShowProgress: true//不显示progress动画（默认不开启）
})
.then(respon => {
  ...
})
.catch(err => {
  ...
});