vue网络请求的二次封装

一、先安装axios包

npm install axios

二、引入 axios

import axios from 'axios'

三.创建实例

const api = axios.create({
    baseURL: '', // 所有请求的公共地址部分
    timeout: 　6000 // 请求超时时间 这里的意思是当请求时间超过6秒还未取得结果时 提示用户请求超时

四、请求拦截器 

// 请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置
// interceptors axios的拦截器对象
api.interceptors.request.use(config => {
    config.headers['token'] = sessionStorage.getItem('token') ?                 
    sessionStorage.getItem('token') : ''
    return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行
}, err => {
    // 请求发生错误时的相关处理 抛出错误
   Promise.reject(err)
})
————————————————
版权声明：本文为CSDN博主「sogoodboy2」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sogoodboy2/article/details/131501666

五、响应拦截器

api.interceptors.response.use(res => {
    // 我们一般在这里处理，请求成功后的错误状态码 例如状态码是500，404，403
    if (res.data.code == 200) {
      return Promise.resolve(res)
}, err => {
    // 服务器响应发生错误时的处理
    Promise.reject(err)
})
————————————————
版权声明：本文为CSDN博主「sogoodboy2」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sogoodboy2/article/details/131501666

六、暴露出去

export default api

七、封装接口 

import service from '../index'
 
interface  LoginData{
    code:number,
    datas:any
 }
 
 
//  登录的token 唯一标识 =》
export  function getmyDatas(data:any):Promise<LoginData> {
 
    return service.post('/my',data)
  }
  interface  RouteData{
    code:number,
    routes:any
 }
 
  export  function getLimitRoutes(data:any):Promise<RouteData> {
 
    return service.post('/addRoute',data)
  }
————————————————
版权声明：本文为CSDN博主「sogoodboy2」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sogoodboy2/article/details/131501666