axios http请求
2020-03-20 本文已影响0人
有你有团
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
功能
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
安装
使用npm
npm install axios
使用 bower
bower install axios
使用cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
这里整理一下axios基于vue项目的封装
- 对于小项目，请求也比较少的，也不用带token去请求数据可以直接axios文档中的方法就不用封装了（封装请求也不是不可以~~）
- 在main.js中引入axios
//main.js
import Axios from 'axios'
Vue.prototype.$axios = Axios
- 页面中使用
// 参考axios官网中例子
// 为给定 ID 的 user 创建请求
this.$axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
- 封装
- 在utils文件下面新建一个request.js(请求分装)和tips.js(提示)
//request.js
import axios from 'axios' //引入axios
import store from 'store' //引入store ,在拦截时的操作
import {requestError , authInvalid } from 'store' //引入store ,在拦截时的操作
import * as Setting from '@/setting.js' //这里设置环境
//创建一个axios示例
const service = axios.create({
//全局的 axios 默认值
baseURL:Setting.requestPath , //请求基路径，根据node的环境变量来匹配我们的默认的接口url前缀
timeout:3000 //超时
})
//设置请求拦截器（多数情况下是验证token）
service.interceptors.request.use(
config => { //请求成功
//这里最先拿到你的request
//这里token是存储在vuex中，当然也可以存在cookies，sessionStorage
if(store.state.token){ //如果存在token 每次请求带token请求数据
let token = store.state.token
config.headers['X-Access-Token'] = token
}else{
//token失效、没有token，跳转登录，重新获取token
authInvalid () //定义好的方法，提示token失效
store.dispatch('user/logout') //跳转登录，清除token
}
return config //一定要返回
} ,
error => { //请求错误
//这里极少情况会进来，暂时没有找到主动触发得方法，
return Promise.reject(error) //一定要返回
}
)
//设置响应拦截器（服务端返回的响应）
service.interceptors.response.use(
response => {
//这里最先拿到你的response,如果响应成功都会进入这里
if(response.data.code === 401){
requestError ()
}else if(response.data.code === 404){
//针对服务端返回的状态码做出响应的提示和操作
}
return response
},
error => {
//目前发现三种情况会进入这里，
//1.http状态码非2开头的，404，405等
//2.取消请求也会进入这里，cancelToken,
//3.请求运行异常也会进入这里，如将header写错、或者request中有语法错误也会进入这里
//进入这里意味着请求失败，axios进入catch分支
if(response.data.message=== 'token失效'){
//token失效-和请求拦截时没有token相同的操作
authInvalid () //定义好的方法，提示token失效
store.dispatch('user/logout') //跳转登录，清除token
}else if(response.data.code === 404){
//针对服务端返回的状态码做出响应的提示和操作
}
return Promise.reject(error)
}
)
//将示例导出去
export default service
- 在src新建一个api文件夹，再新建index.js 和api.js
//api.js
import request form '@/utils/request.js'
//这里设置请求api-get
export function requestUserData(){
return request({
url:'/userInfo',
method:'get'
})
}
//这里设置请求api-post
export function requestUserData(params){
return request({
url:'/userInfo',
method:'post',
data:params
})
}
//index.js
import * as user from './api.js'
export{ user }
- 再需要使用的页面引入
//index.vue
import * as API form '@/api/index.js'
API.user.requestUserData(params).then(res => {
if (res.status === 200) {
var data = res.data.data;
if (data) {
//获取data
}
}
}).catch(error => {
console.log(error)
})
