导语：最近在用vue脚手架开发应用的过程中遇到了Ajax请求的问题，由于定制化比较明显，所以就到网上找一些自定义的方法，最后使用官方的方法成功的封装了自己需要的那种，现在就自定义的方法做一下总结。
目录
- axios是什么
- 如何使用axios
- 自定义axios
axios是什么
axios是基于Promise的一款http客户端工具，用于在游览器和nodejs环境中进行请求网站资源。
有以下特性：
- 为游览器生成一个http请求
- 为node生成一个http请求
- 支持Promise的API方法
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换成json数据格式
- 客户端防范XSRF
如何使用axios
- 下载使用
- cdn引入
- npm安装
- get请求
- post请求
下载/CDN使用
如果你只在游览器使用，可以下载到本地或者使用cdn。
<!-- 本地引入 -->
<script src="js/axios.min.js"></script>
<!-- cdn -->
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>npm安装
npm install axios -Sget请求
推荐配合await这种方法使用。
async function getComments () {
try {
let data = await axios.get('https://jsonplaceholder.typicode.com/comments', {
params: {
postId: 1,
}
})
console.log(data);
}catch (error) {
console.error(error);
this.$toast("接口出错了！")
}
}
this.getComments();下面是获取的内容：
post请求
async function savePosts () {
let data = await axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'far',
body: 'bar',
userId: 121,
})
console.log(data);
}
this.savePosts();下面是获取的内容：
自定义axios
有时候对于一些要求比较少的网站应用来说，是一个不错的选择，但是对于大型应用来说显得有的蹩脚，施展不开。所以就有了自定义axios请求的一种方法，按照所需自定义请求各个方面的内容。
一般有自定义请求url,是否跨域，请求头，拦截请求和响应等方法。
创建一个axios实例
let server = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com', //请求url
timeout: 3000, //超时处理
withCredentials: false, //是否跨域
});拦截请求
常见的就是在请求之前加一些请求头和一些有关请求的内容。
//添加一个请求拦截器
server.interceptors.request.use(function (config) {
//在请求发出之前进行一些操作，比如请求头携带内容
config.headers['Content-Type'] = 'application/json, text/plain';
//设置口令 token
//config.headers.Authorization=sessionStorage.getItem('token');
return config;
}, function (error) {
return error;
this.$toast('请求出错啦~')
});拦截响应
和拦截响应一样，也是做一些操作。
//添加一个响应拦截器
server.interceptors.response.use(function (res) {
// 写一下操作，比如token过期处理
if (res.data.statusCode == 401) {
alert('暂无权限，请重新登录!');
window.location.href = '/login';
return false;
}
return res;
}, function (error) {
switch (error && error.response && error.response.status) {
case 400:
error.message = '请求错误'
break
case 401:
error.message = '未授权，请登录'
break
case 403:
error.message = '拒绝访问'
break
case 404:
error.message = '未找到访问地址'
break
case 408:
error.message = '请求超时'
break
case 500:
error.message = '服务器内部错误'
break
case 501:
error.message = '服务未实现'
break
case 502:
error.message = '网关错误'
break
case 503:
error.message = '服务不可用'
break
case 504:
error.message = '网关超时'
break
case 505:
error.message = 'HTTP版本不受支持'
break
default:
}
//Do something with response error
return error;
})自定义请求
使用自定义请求时，就可以省略域名地址了，例如：
async function getComments () {
let data = await server.get('/comments', {
params: {
postId: 1,
}
})
console.log(data);
}
this.getComments();以下为我自定义的，在 src下新建一个util文件夹
util/axios.config.js
import axios from 'axios'
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
const instance=axios.create({
// baseURL:'http://www.baidu.com', //基础URL,如果请求多个服务器的api，可以不用直接定义
timeout:1000, //请求延时时间
headers: {'X-Requested-With': 'XMLHttpRequest'}, //自定义请求头内容
responseType: 'json', //请求数据类型包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
// params: {}, //无论请求为何种类型，在params中的属性都会以key=value的格式在url中拼接
// proxy: {
// //代理
// host: '127.0.0.1',
// port: 9000,
// auth: {
// username: 'mikeymike',
// password: 'rapunz3l'
// }
// },
})
// 自定义添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
// Message.error('参数错误')
return Promise.reject(error);
});
// 自定义添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
//将配置暴露出去
export default instance;再新建一个api.js用于管理所有的请求
util/api.js
import request from '../util/axios.config'
//如果请求多个服务器的api，可以这样定义
const baseURL1='http://www.baidu.com';
const baseURL2='http://www.baidu.com';
// 获取疫情地图参数
export function GetMapOption(){
return request({
url:'../assets/optionMap.json',
method:'get'
})
}
// 登录
export function Login(params){
return request({
url:baseURL1+'admin/login',
method:'post',
data:params
})
}
// 修改信息
export function UpdateInfo(params){
return request({
url:baseURL2+'admin/user/UpdatePsw',
method:'post',
data:params
})
}在组件中使用
import {Login} from '../util/api'
var param={
userName: this.LoginName,
psw: this.Password
}
Login(JSON.stringify(param)).then(res=>{
//console.log(res)
if(res.status=='200'){
this.$message.success('登录成功~');
this.$router.push({path:'/main'})
}else if(res.status=='500'){
this.$message.error(res.data.msg);
}
})
.catch(error=>{
console.log(error);
this.$message.error('网络出错了~请稍后重试')
})参考链接：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
