020.Axios

Posted 2022-12-06 Composition55555

文章目录

• • 01. Axios 封装
  • • （1）引入Axios
    • （2）创建实例
    • • （a）关于配置项：
    • （3）请求拦截
    • （4）响应拦截
    • （5） 请求
    • （6）使用
    • （7）终

---

01. Axios 封装

（1）引入Axios

import axios from 'axios'

（2）创建实例

const request = axios.create(
    // 配置项
)

（a）关于配置项：

• baseURL：请求地址前缀，将自动添加在URL前面

  • 通常，对于开发环境和生产环境有这不一样的baseURL
  • 因此，需要根据不同环境来切换不同的bseURL

  baseURL: process.env.NODE_ENV === 'production' ? '/production' : '/development'
  

• timeout：设置默认的请求超时时间，单位为毫秒，超过这个时间就会请求失败

  timeout: 10000
  

（3）请求拦截

• 在发送请求之前，对请求进行拦截，在这里对数据进行一些处理
  • 一般用于在请求头中添加Token，判断登录状态

// 请求拦截器 request
request.interceptors.request.use(    
    config => 
        // 拦截之后做一些处理。如：判断是否有token
        const token = localStorage.getItem('token')
        if(token)
            // 如果有token，则在请求头中添加token
            config.headers['X-Token'] = token
        
        // 处理完后必须返回 config
        return config
    ,    
    error => 
        return Promise.reject(error)
    )

（4）响应拦截

• 对服务器返回给我们的数据进行拦截，在获取到这个数据之前，对这个数据进行一些处理判断
  • 主要用于对错误进行统一处理

// 响应拦截器 response
request.interceptors.response.use(
    // 请求成功
    response => 
        if (response.status === 200)   
            // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
            return Promise.resolve(response);        
         else   
            // 否则的话抛出错误
            return Promise.reject(response);        
        
    ,
    // 请求失败
    error => 
        // 对其它返回错误做操作。如401、403、404等
        return Promise.reject(error)
    
)

（5） 请求

• 可以对get和post请求进行封装，不过我个人习惯以下写法

// api.js
import request from '@/utils/request'

export default getList(params)
    return request(
        url: '/',
        method: 'get',
        params
    )


export default postList(data)
    return request(
        url: '/',
        method: 'post',
        data
    )

（6）使用

• 直接引入API文件进行使用，可以全局引入，也可以按需引入

import  getList, postList  from '@/api/api.js'

getList(params).then(res => 
    // ...
).catch(error => 
    // ...
)

---

（7）终

// request.js
import axios from 'axios'

const request = axios.create(
    baseURL: process.env.NODE_ENV === 'production' ? `/` : '/apis', // 配置基准地址
    headers: 
        get: 
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
        ,
        post: 
            'Content-Type': 'application/json;charset=utf-8'
        
    ,
    timeout: 30000, // 配置超时时间
)

// 请求拦截器
request.interceptors.request.use(
    config => 
        return config
    , 
    error => 
        // 错误抛到业务代码
        error.data = 
        error.data.msg = '服务器异常，请联系管理员！'
        return Promise.resolve(error)
    
)

// 响应拦截器
request.interceptors.response.use(
    // 请求成功
    response => 
        const status = response.status // 获取状态码
        let msg = ''
        if (status < 200 || status >= 300) 
            // 处理http错误，抛到业务代码
            msg = showStatus(status)
            if (typeof response.data === 'string') 
                response.data =  msg 
             else 
                response.data.msg = msg
            
        
        return response
    , 
    // 请求
    error => 
        console.log('err' + error)
        Message(
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        )
        return Promise.reject(error)
    
)

const showStatus = status => 
    let message = ''
    switch (status) 
        case 400:
            message = '400:请求错误'
            break
        case 401:
            message = '401:未授权，请重新登录'
            break
        case 403:
            message = '403:拒绝访问'
            break
        case 404:
            message = '404:请求资源不存在'
            break
        case 405:
            message = '405:请求方法不允许'
        case 408:
            message = '408::请求超时'
            break
        case 500:
            message = '500:内部服务器错误'
            break
        case 501:
            message = '501:服务未实现'
            break
        case 502:
            message = '502:网络错误'
            break
        case 503:
            message = '503:服务不可用'
            break
        case 504:
            message = '504:网络超时'
            break
        case 505:
            message = 'HTTP版本不受支持(505)'
            break
        default:
            message = `连接错误，错误代码:($status)!`
    
    return `$message，请检查网络或联系管理员！`


export default request