简介

​说明​

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

  • 从浏览器中创建​​XMLHttpRequest​​
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF

​axios的github​

​​GitHub - axios/axios: Promise based HTTP client for the browser and node.js​​

​如何使用​

        安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但axios没有install 方法，所以是不能使用vue.use()方法的。所以主要有以下几种用法：

  1. 每个文件都引用一次axios（很繁琐，抛弃这种方法）
  2. 结合 vue-axios使用
  3. 引入 axios 之后，修改原型链（不推荐）
  4. 结合 Vuex，封装一个 aciton

使用方式

​方式1：结合vue-axios（推荐）​

看​​vue-axios​​的源码，可知它是按照vue插件的方式去写的，那么结合vue-axios，就可以去使用vue.use方法了。

首先在主入口文件main.js中引用：

import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,Axios);

之后就可在组件文件中的methods使用了 ：

getNewsList(){
      this.axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })
}

​方式2：修改原型链​

首先在主入口文件main.js中引用，之后挂在vue的原型链上：

import Axios from 'axios'
Vue.prototype.$axios= Axios

在组件中使用：

this.$axios.get('api/getNewsList')
.then((response)=>{
    this.newsList=response.data.data;
}).catch((response)=>{
    console.log(response);
})

​方式3：结合 Vuex​

在vuex的仓库文件store.js中引用，使用action添加方法：

import Vue from 'Vue'
import Vuex from 'vuex'

import axios from 'axios'

Vue.use(Vuex)
const store = new Vuex.Store({
  // 定义状态
  state: {
    user: {
      name: 'xiaoming'
    }
  },
  actions: {
    // 封装一个 ajax 方法
    login (context) {
      axios({
        method: 'post',
        url: '/user',
        data: context.state.user
      })
    }
  }
})

export default store

在组件中发送请求的时候，使用 this.$store.dispatch

methods: {
  submitForm () {
    this.$store.dispatch('login')
  }
}

常用操作

​指定baseUrl​

import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8081"

拦截器

​用法简介​

import axios from 'axios'

axios.interceptors.request.use(function (request) {
    // 在发送请求之前做些什么
    //request是axios请求的参数
    return request;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    // response 是请求回来的数据
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
})

​典型示例​

import axios from 'axios'

axios.interceptors.request.use(function (request) {
    if (request.method == 'post' && request.url === '/login') {
        request.data = qs.stringify(request.data);
    }
    return request;
}, function (error) {
    return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
    if (response.code < 400) {
        return response
    } else {
        alert('失败：' + response.data.msg);
        return Promise.reject(response.data.msg)
    }
    return response;
}, function (error) {
    console.log(error);
    alert('出错：' + error.message);
    return Promise.reject(error)
})

其他网址

​​axios拦截器​​