axios传送门：http://www.axios-js.com/
axios的理解
axios是通过promise实现对ajax技术的一种封装，就像jquery实现ajax封装一样。
vue2之后vue-resource就不在更新了，推荐使用axios，
axios可以拦截请求和响应，在then() catch处理前拦截他们，可以用在请求动画等
简单来说：ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装
优缺点
ajax
ajax，本身是针对mvc的编程，不符合现在前端的mvvm的浪潮
ajax，基于原生xhr开发，XHR本身的架构不清晰，已经有了fetch的替代方案
query整个项目太大，单纯使用ajax却要引入整个jquery非常不合理
axios
从node.js创建http请求
支持promise api
客户端支持防止（csrf）网站恶意利用
提供了一些并发请求接口（重要，方便了很多的操作）
axios.all([
axios.get('data.json'),
axios.get('city.json')
]).then(
axios.spread((dataRes,cityRes)=>{
console.log(dataRes,cityRes)
})
).catch(err=>{})
all同时进行两个请求，同时输出两个结果，
spread在继续对返回值处理，输出
当需要同时请求多个接口时，并同时处理返回值时可以使用并发请求
axios.post('/login',{username:'zmq',pwd:'123'}).then(res=>{})
axios.get('/login',params:{username:'zmq',pwd:'123'}).then(res=>{})
通用使用
//axios(config)
axios({
methods:'post',
url:'http://jsonplaceholder.typicode.com/users',
data:{
name:'zmq'
}
}).then(res=>{
}).catch(err=>{})
并发请求
function getUserAccount(){
return axios.get('/user/12345')
}
function getUserPromise(){
return axios.get('/user1/1235')
}
axios.all([getUserAccount(),getUserPromise()]).then(
axios.spread((data1,data2)=>{
console.log(data1,data2)
})
)
axios的封装
首先了解：
vue分为开发环境，生产环境，vue-cli自动切换环境
vue中config 中的
dev.env.js为开发环境变量
prod.env.js为生产环境变量
通过process.env.NODE.ENV获取各环境中的变量
因为请求的接口开发和生产环境不同，生产环境直接‘’除域名没其他添加的时候
通过以下代码修改axios中baseURL
axios中baseURL的作用：自动添加在url前面，除非url是绝对url，
它可以通过设置一个baseURL便于axios实例方法传递相对的url
axios.defaults.baseURL=process.env.API
封装主要是封装一个统一的拦截器，拦截请求前数据做统一处理，响应后数据做统一处理。
拦截请求可以做一些请求动画
响应拦截可以判断用作判断响应状态码，例如，本地存储了用户的信息，在一段时间内，是登录状态，当超时的时候，本地信息过期，这时候在去拿本地信息请求数据，后台就会返回信息过期的状态码，这个时候可以拦截下状态码，同时将本地登录信息清除，让用户重新登录
第二个封装就是，封装统一的请求接口的文件，将所有接口放在一个文件或者多种类型文件中。使用的时候直接在vue中使用封装好的方法
http.js
import axios from 'axios'
let $http=axios.create()
$http.defaults.baseURL=process.env.API //在congif dev.env.js prod.env.js 中设置的
//请求拦截
$http.interceptors.request.use(
config=>{
return config
},
err=>{
return Promise.reject(err)
}
)
//响应拦截
$http.interceptors.response.use(
response=>{
if(response.data.errcode==40023){
localStorage.clear()
this.$router.path('/login')
}else{
//当前还是登陆状态
}
}
)
//统一接口请求封装
function fetch(method='get',url,params){
return new Promise((resolve,reject)=>{
$http(
{
url:url,
method:method,
data:params
}
).then(res=>{
reslove(res)
}).catch(err=>{
reject(err)
})
})
}
export default fetch
api.js
import fetch from './http.js';
export default{
login(params){
return fetch('post','/login',params)
}
}
login.vue 使用
import comService from '../common/api/comService'
let params={
username:'zmq',
pws:'123'
}
comService.login(params).then(data=>{
console.log(data)
})
网友评论