共计 2072 个字符,预计需要花费 6 分钟才能阅读完成。
引入 axios 包
–> 写一个申请出错时用于揭示的办法
–> 通过 create 创立 axios 申请
—-> 给 axios 配置根本信息 [baseURL( 域名),timeout(超时工夫)]
–> 通过 axios.interceptors.request.use 配置申请拦挡,两个参数 config 能够配置一些信息 token 等,error 示意申请出错 -> 抛出异样
–> 通过 axios.interceptors.response.use 配置响应拦挡, 两个参数 res & error ,res 示意服务端响应胜利状态码为 200,error 示意申请出错 -> 抛出异样,须要依据错误码执行对应的操作 (404….)
代码如下:
import axios from "axios";
const errTips = msg => {alert(msg)
}
const service = axios.create({
baseURL: 填写自家域名,
timeout: 10000
})
// 申请拦挡
service.interceptors.request.use(
config =>{ // 获取到缓存.. 中的 token 增加到申请头
let token = 'ssss'
config.headers.token = token
return config
},
err => {errTips(err)
return Promise.reject(err)
}
)
// 响应拦挡
service.interceptors.response.use(
res => { // 代表网络申请胜利了,stutas == 200
// 判断接口返回的数据,这里咱们后端也加了判断返回的 code 不等于 200 就没通过后端的校验
if(res.data.code !== 200){errTips(res.data.msg)
return Promise.reject(res.data) // 抛出异样
}else{return Promise.resolve(res.data)
}
},
error => { // 网络申请出错 判断状态码做出相应的操作
let {response} = error
switch (response.data.status){ // 能够独自封装进来
case 404:
errTips(`${response.data.status}-->${response.data.message}`)
break;
case 403:
errTips(`${response.data.status}-->${response.data.message}`)
break;
default:
errTips(`${response.data.status}-->${response.data.message}`)
}
return Promise.reject(error)
}
)
export default service
申请封装好之后就能够封装对接口申请的 api 文件了,示例如下:
import request from '@/utils/request'
export default{apiGet(url, data){
return request({
url,
params: data,
method: 'get'
})
},
apiPost(url, data){
return request({
url,
data,
method: 'post'
})
}
}
接下来间接在页面引入就能应用了,示例如下:
<template>
<div class="containter">
<button @click="toGet"> 点我 </button>
<button @click="toPost">post 点我 </button>
</div>
</template>
<script>
import request from '@/api/api.js'
export default {data () {return {}
},
methods: {toGet(){
request.apiGet('pc/fee/bill/load-scheme',{
schoolId: '50899f90f9e211e7a9192c4d54595581',
studentId: '',
billId: '1524272640494178304'
}).then(res => {console.log('申请胜利',res);
}).catch(err => {console.log('申请失败',err);
})
},
toPost(){
request.apiPost('pc/bill/classification/list-page',{
startTime: '',
endTime: '',
name: '',
schoolId: '50899f90f9e211e7a9192c4d54595581',
page: 1,
row: 10
}).then(res => {console.log('申请胜利', res);
}).catch(err => {console.log('申请失败', err);
})
}
}
}
</script>
<style scoped>
</style>
欢送交换!
正文完