vue中axios的使用相关

前言

首先明白axios是干什么的，axios主要是用于向后台发起请求的。

安装

我是使用的npm安装

npm install axios

执行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(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post请求需要用querystring进行转换一下数据格式
querystring的使用方法：
1.安装
2.在main.js引入（import querystring from ‘querystring’ ）
3.在main.js挂载到全局（Vue.prototype.querystring = querystring）
4.使用方法：this.querystring.stringify(data)

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

---

以上都是文档中最基础的用法，这里我主要记录一下拦截器的用法

配置

1.在main.js里引用并挂载到全局

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

2.配置请求超时时间

axios.defaults.timeout = 5000  //单位毫秒

3.baseURL

axios.defaults.baseURL='www.baidu.com'

当然这里一般是一个变量。
另外还有其他配置，待完善

请求拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

请求拦截器，顾名思义就是在每次使用axios发送请求之前拦截请求，那拦截请求做什么呢？可以做的很多，比如加一个加载中的状态，防止用户第二次点击，或者在header里面添加一个token。
我们可以在请求之前把console.log(config)把config打印一下

可以看到的是，我们发送的请求中的所有信息都存在于config中，包括baseURL，header，请求方式post还是get，还有我们发送的参数，url，请求超时的时间等
另外举个例子，比如我们要在请求之前在header中添加token

//添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 先添加token，在将config返回给aixos
    config.header.common['access_token'] = getToken() || '';
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

响应拦截器

响应拦截器，就是请求成功后，后台有响应了，就是后台返回东西回来了，不管对错，response就是返回的数据，我们可以根据code等状态来做一些公共的事情，写在里面就行了，比如我们在请求前添加了加载中状态，就可以在这里取消

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

封装请求（2019年6月29日补充）

首先我们在src文件下新建一个request的文件夹，然后在request文件夹下新建两个js文件：http.js和api.js

//http.js
import axios from 'axios'
import querystring from 'querystring'
//get请求
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err.data)
        })
    });
}
//post请求
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url,querystring.stringify(params)).then(res => {               
             resolve(res.data);
        }).catch(err => { 
            reject(err.data)
        })
    });
}

api.js：

使用：
首先在组件引入当前组件需要用到请求：

import { getImTokenHttp } from '@/request/api.js'

然后在方法里面调用

fun(){
	let data = {
		//参数
	}
	getImTokenHttp (data).then(res=>{
		//res为返回结果
	})
}

或者

async fun(){
	let data = {
		//参数
	}
	let res = await getImTokenHttp (data);
	//res为返回结果
}

另外前文说的baseURL、请求超时、请求守卫等配置可以写到http.js里