前端必懂!Axios!

安装

npm i axios vue-axios -S(可以加上--save-exact 作为精确版本安装)

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
// 设置通用的请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

提供的API

request(config)
get(url, config)
delete(url, config)
head(url, config)
options(url, config)
post(url, data, config)
put(url, data, config)
patch(url, data, config)
// 同时调用两个接口
all()

axios()

axios({
		url: 'url',
		method: 'get', // 'post'
		// 'get'使用params
		params: {
			key: val
		},
		// 'post'使用data
		data: {
			key: val
		},
		headers: {
			key: val
		}
	})
	.then(res => {})
	.catch(err => {})

get()

axios.get('url', {
		// 传参
		params: {
			key: value
		},
		// 请求头
		headers: {
			key: value
		}
	})
	.then(res => {})
	.catch(err => {})

post()

axios.post('url', {
		// 传参
		key: value
	}, { // 请求头
		headers: {
			key: value
		}
	})
	.then(res => {})
	.catch(err => {})

request 拦截器

axios.interceptors.request.use(
	config => {
		if (store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
			config.headers.Authorization = `token ${store.state.token}`;
		}
		return config;
	},
	err => {
		// 请求失败的统一处理
		return Promise.reject(err);
	});

response 拦截器

axios.interceptors.response.use(
	response => {
    // 配置
		return response;
	},
	error => {
		if (error.response) {
			switch (error.response.status) {
				case 401:
					// 判断状态码进行处理
			}
		}
		return Promise.reject(error.response.data)   // 返回接口返回的错误信息
	});