axios中文文档
axios发送GET、POST请求
axios拦截器的使用

安装

npm i axios -S

用axios代替ajax

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
axios中文文档

配置默认值

配置后端host

1	axios.defaults.baseURL = 'https://api.example.com';

这样，url就不需要写成https://api.example.com/user，只需要写成/user即可

配置withCredentials
1
axios.defaults.withCredentials = true;

表示跨域请求时带上凭证

配置POST请求格式

1	axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

基础用法

// 发送 GET 请求
axios({
  method: 'get',
  url: '/user',
  params: { //只有GET是用params发送参数，会显示在地址栏
    ID: 12345,
  }
})
  .then(res => {
    console.log(res);
  })
  .catch(error => {
    console.log(error);
  });
;
// 发送 POST 请求【params用于GET时发送参数，会显示在地址栏；除此以外的用data发送参数，显示在开发者工具的Form Data里】
axios({
  method: 'post',
  url: '/user',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
;

执行GET请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

带查询参数的GET请求

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(res => {
    console.log(res);
  })
  .catch(error => {
    console.log(error);
  });

执行POST请求

GET请求可以直接/user?ID=12345，数据会显示在地址栏；POST请求为了安全，不能直接在url后面接数据

在axios中的post请求要非常注意两个地方：

要设置合适的请求头，一般采用x-www-form-urlencoded即可

发送的数据要用qs序列化，因为axios默认的格式是Request Payload(打开控制台的Network -> Headers)。

import axios from 'axios';
import qs from 'qs';
axios.post('/user', 
  qs.stringify({
    firstName: 'Fred',
    lastName: 'Flintstone'
  }),
  {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
  }
  ).then(({data}) => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

此时，打开Network -> Headers,可以看到数据在Form Data中了。

拦截响应，返回自定义假数据

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    let {config:{url,method,data}} = response;
    //↑ 分解成let url = response.config.url;
    if (url === '/book/1' && method === 'get') {
		response.data = {
			name: stage,
		}
    } else if (url === '/books/1' && method === 'put') {
      data = JSON.parse(data)
      Object.assign(book, data)
      response.data = book
    }
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

将axios添加到vue的prototype上

import axios from 'axios';
Vue.prototype.$axios = axios;
//然后就可以通过this.$axios来使用axios
//这样就不需要每个文件内都import axios了

jsonp跨域

axios-jsonp-pro

官网：https://github.com/RekingZhang/axios-jsonp

npm i axios-jsonp-pro

使用

与axios一样的api，并且多了jsonp功能

// jsonp跨域请求
axios.jsonp('/user?ID=12345')
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  });
 
// 也可以写成这种形式
axios.jsonp('/user', {
    timeout: 1000,
    params: {
      ID: 12345
    }
  })
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  });

【点击查看代码】

vue-jsonp

npm i vue-jsonp

使用

this.$jsonp(url, dataObj, timeout)

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
 
// Use it in Vue Component.
  methods: {
    getData() {
      this.$jsonp('https://api.douban.com/data',{ name: 'stage', age: 24 })
      .then(res => {
        // Success.
      })
      .catch(err => {
        // Failed.
      })
    }
  }

axios的使用教程

安装