Axios简介:
axios是一个promise实现的http库,符合最新的ES规范。要用这个东西主要有以下几个原因:
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 拦截请求和响应
- 转换请求数据和响应数据
- 支持 Promise API(可以配合ES7的async await使用,解决回调地狱)
- 客户端支持防止CSRF
- 提供了一些并发请求的接口
- 轻量,体积小
安装
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);
})
执行多个并发请求:
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) {
//两个请求现在都执行完成
}))
Axios二次封装:
目录:
axios.js:这个文件主要创建axios实例并对拦截器进行配置
拦截器图解:
import axios from 'axios'
import { getLocalStorage } from '@/utils/localStorage'
import { Toast } from 'vant'
//创建axios实例
let service = axios.create({
timeout: 60000
})
//设置post、put默认Content-Type
service.defaults.headers.post['Content-Type'] = 'application/json'
service.defaults.headers.put['Content-Type'] = 'application/json'
//添加请求拦截器
service.interceptors.request.use(
(config) => {
//LocalStorage中获取token后设置请求头
config.headers.common['Authorization'] = getLocalStorage('Token')
return config
},
(error) => {
//请求错误处理
Toast('请求超时!')
return Promise.reject(error)
}
)
//添加响应拦截器
//response拦截器
service.interceptors.response.use(data => {
if (data.status && data.status == 200 && data.data.status == 'error') {
Toast({ message: data.data.msg });
return;
}
return data;
}, err => {
//错误处理
if (err && err.response) {
switch (err.response.status) {
case 400: Toast('请求错误(400)'); break;
case 401: Toast('未授权,请重新登录(401)'); router.push('/login'); break;
case 403: Toast('拒绝访问(403)'); break;
case 404: Toast('请求出错(404)'); break;
case 408: Toast('请求超时(408)'); break;
case 500: Toast('服务器错误(500)'); break;
case 501: Toast('服务未实现(501)'); break;
case 502: Toast('网络错误(502)'); break;
case 503: Toast('服务不可用(503)'); break;
case 504: Toast('网络超时(504)'); break;
case 505: Toast('HTTP版本不受支持(505)'); break;
default: Toast(`连接出错(${err.response.status})!`);
}
} else {
Toast('连接服务器失败')
}
Toast({ message: err.message })
return Promise.reject(err);
})
/**
* 创建统一封装过的axios实例
* @return {AxiosInstance}
*/
export default function () {
return service
}
index.js:这个文件主要封装我们几个常用的方法、get/post/put/delete
import axios from './axios'
let instance = axios()
export default {
get(url, params) {
return new Promise((resolve, reject) => {
instance.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data)
})
})
},
post(url, params) {
return new Promise((resolve, reject) => {
instance.post(url, params)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
},
put(url, params) {
return new Promise((resolve, reject) => {
instance.put(url, params)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
},
delete(url, params) {
return new Promise((resolve, reject) => {
instance.delete(url, params)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
}
install.js:这个文件可以把我们所有的api接口安装到全局,之后我们在main.js文件中导入就可以了。
import apiList from './apiList'
const install = function (Vue) {
if (install.installed) return
install.installed = true
Object.defineProperties(Vue.prototype, {
$api: {
get() {
return apiList
},
enumerable: false, // 不可枚举
configurable: false // 不可重写
}
})
}
export default {
install
}
main.js:在这个文件中添加
import api from './api/install'
Vue.use(api)
apiList.js:这个文件把我们所有api文件夹导入到这一个文件中来
import user from './user'
import matter from './matter'
import feedback from './feedback'
import clock from './clock'
import dynamic from './dynamic'
import location from './location'
import address from './address'
import coupon from './coupon'
import good from './good'
import order from './order'
export default {
user,
matter,
feedback,
clock,
dynamic,
location,
address,
coupon,
good,
order
}
user:这个文件下有两个文件: (这里只列举user,其他文件类似)
目录:
urls.js
const baseUrl = '/api'
export default {
userinfo: baseUrl + '/client/users/userinfo',
login: baseUrl + '/client/users/login',
updatePassword: baseUrl + '/client/users/updatePassword',
resetPassword: baseUrl + '/client/users/resetPassword',
register: baseUrl + '/client/users/register',
updateUserInfo: baseUrl + '/client/users/updateUserInfo',
getAnnounce: baseUrl + '/client/users/getAnnounce'
}
index.js
import api from '../index'
import urls from './urls'
export default {
//获取用户信息vuex保存
userinfo() {
return api.get(urls.userinfo)
},
//登录
login(params) {
params = {
userName: params.userName,
password: params.password
}
return api.post(urls.login, params)
},
//修改密码
updatePassword(userId,params) {
params = {
oldPassword:params.oldPassword,
newPassword:params.newPassword
}
return api.put(urls.updatePassword + `/${userId}`, params);
},
//重置密码
resetPassword(userName,params) {
return api.post(urls.resetPassword + `/${userName}`, params);
},
//注册
register(params){
return api.post(urls.register, params);
},
//编辑用户信息
updateUserInfo(params,userId) {
return api.put(urls.updateUserInfo + `/${userId}`, params);
},
//获取公告
getAnnounce() {
return api.get(urls.getAnnounce);
}
}
在组件中使用: this.$api.user.useinfo(params)
try{
let params = {
user_id:1001
}
let res = await this.$api.user.useinfo(params)
consol e.log(res)
} catch (e) {
console.log(e)
}