关于axios的一些笔记

下载安装

axios官方网站

npm install axios

vue中使用

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

axios的配置

//方法一：配置全局默认值
axios.defaults.baseURL = 'http://api.example.com';// 基本路径
axios.defaults.headers.common['token'] = token;// 请求头配置，具体有哪些参数看你们后台要哪些
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 设置请求头中content-type的类型。

//方法二：自定义实例默认值
// 创建实例时设置配置默认值
const service = axios.create({
    baseURL: 'https://www.xxxxxxx.com',
    timeout: 1000,
    headers: {
    	'Content-Type': 'application/x-www-form-urlencoded',
    	'Authorization':token
    },
});

二次封装

代码如下：

// 页面引入
import axios from 'axios'
// 创建实例
const service = axios.create({
	baseURL, // 请求地址
	timeout: 25000, // 请求超时时间
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded'
	}
})
// 添加请求拦截器
service.interceptors.request.use(
	config => {
		return config
	},
	error => {
		return Promise.reject(error)
	}
)
// 添加响应拦截器
service.interceptors.response.use(function (response) {
	return response.data
},error => {
	return Promise.reject(error)
})
Vue.prototype.$service = service

在其他页面使用

onclick(e){	//点击事件
	const params = {
	  // 这里放后台要的各种参数
	};
	this.$http.post(this.$api.xxx, params).then((res) => {
		console.log(res)
	}),catch((err) =>{
		console.log(err)
	});
	// 注：这里的this.$api是封装的后台接口,
}

算是一个简单的封装方法了