react中axios引用以及实例封装常见拦截器请求方式

介绍：

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
官网： http://www.axios-js.com/

引用axios：

npm方式：
	npm install axios

cnpm方式：
	cnpm install axios

yarn方式：
	yarn add axios

bower方式：
	bower install axios

cdn标签：
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

封装：

import axios from 'axios'
import { Message } from 'element-ui' // 按需开放-非必须

// import { baseURL } from '@/utils/env' // 一般专门抽出来接口地址前缀
const baseURL = process.env.NODE_ENV === 'development' ? 'url01' : 'url02'
// 或者根据 url的包含判断：location.href.includes("http://aaa.com") ? 'url01' : 'url02'
// 或者根据 url的host判断：location.host === "http://aaa.com" ? 'url01' : 'url02'

import store from '../store' // 按需开放-非必须

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //其他类型 自行更换 -- 自定义某个在 service.interceptors.request.use修改判断
axios.defaults.baseURL = baseURL
// axios.defaults.timeout = 10000; //超时时间设置，毫秒。0 表示无超时时间 - 按需开放-非必须
axios.defaults.headers['X-Token'] = localStorage.getItem('Token') || '';

// 创建axios实例
const service = axios.create()

// request拦截器
service.interceptors.request.use(
	config => {
		if (store.getters.token) {
			config.headers['X-Token'] = store.getters.token // 让每个请求携带自定义token 请根据实际情况自行修改
		}
		return config
	},
	error => {
		if (error.message.includes('timeout')) { // 判断请求异常信息中是否含有超时timeout字符串
			Message({
			  message: '请求接口超时',
			  type: 'error',
			  duration: 5 * 1000
			})
			return Promise.reject(error); // reject这个错误信息
		}
		// Do something with request error
		console.log(error) // for debug
		Promise.reject(error)
	}
)

// response 拦截器
service.interceptors.response.use(
	response => {
		/**
		 * code为非20000是抛错 可结合自己业务进行修改
		 */
		const res = response.data
		if (res.status == -999) {
			Message({
			  message: '用户登录信息token过期',
			  type: 'error',
			  duration: 5 * 1000
			})
			store.dispatch('LogOut').then(() => {
				location.reload() // 为了重新实例化vue-router对象 避免bug
			})
		}
		return response.data
	},
	error => {
		if (error.message.includes('timeout')) { // 判断请求异常信息中是否含有超时timeout字符串
			Message({
			  message: '请求接口超时',
			  type: 'error',
			  duration: 5 * 1000
			})
			return Promise.reject(error); // reject这个错误信息
		}
		Message({
		  message: error.message,
		  type: 'error',
		  duration: 5 * 1000
		})
		return Promise.reject(error)
	}
)

// 写法一：
// const GET = (url, params) => service.get(url, { params }); //注意这是参数是 对象，{params: params} 简写
// const POST = (url, params) => service.post(url, params);

// 写法二：
const GET = (url, params) => service({
	url,
	method: 'get',
	params,  //注意这里的参数key是 params
})

const POST = (url, data) => service({
	url,
	method: 'POST',
	data, //注意这里的参数key是 data
})

export default service
export {
	GET,
	POST
}

调用：

import { POST, GET } from '../tool/axios.js';

//调用：
GET('/aaaa', {aa: 123, bb: 567})
POST('/bbbb', {aa: 123, bb: 567})

结果：

get：

post:

---

好了，post和get请求案例结束。其他请求方式大同小异。
可以用请求对象自己配置自定义，也可以用官方给出的api

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

---

有问题留言~~