🟡Axios使用与封装

安装依赖

pnpm i axios

使用时引入axios

import axios from 'axios'

基础使用

使用API别名

• axios.request(config)

• axios.get(url, [config])

• axios.delete(url, [config])

• axios.head(url, [config])

• axios.options(url, [config])

• axios.post(url, [data, [config]])

• axios.put(url, [data, [config]])

• axios.patch(url, [data, [config]])

import Axios from 'axios'

// Axios.get(url[, config])
const res = await Axios.get('http://api.test.com', {
  params: {
    id: 1
  },
  timeout: 5000
})

// Axios.post(url[, data[, config]])
const res = await Axios.post('http://api.test.com', {
  id: 0
},{
  timeout: 10000
})

axios( ) API配置

🍆axios配置

axios({
    url: '/user',                        // 请求地址(必选项)
    baseURL: 'https://www.bar.com/foo',  // 自动配置前缀
    params: {                            // url参数
        id: 1234
    },
    method: 'post',                      // 请求方式(默认GET)
    data: {                              // 请求体
        name: 'foo',
        id: 1231,
    }
})
    .then( (res) => {
         // 成功执行
     })
     .catch((error) => {
         // 失败执行
     })
     .then(() => {
         // 始终执行
     })

🍆axios请求别名

使用别名后无需指定method,data等属性

axios.request(config)

axios.get(url, [config])
axios.delete(url, [config])
axios.head(url, [config])
axios.options(url, [config])

axios.post(url, [data, [config]])
axios.put(url, [data, [config]])
axios.patch(url, [data, [config]])

🍆自定义请求

请求结果

{
    data: {},                // 服务器返回内容
    status: 200,             // http状态码
    statusText: 'OK',        // http状态信息
    headers: {},             // 服务器响应头
    config: {},              // axios配置信息
    request: {}              // q
}

拦截器

🌿请求拦截器

axios.interceptors.request.use(
    function (config) {
        // 请求前处理
        return config
    },
    function (error) {
        // 请求错误处理
        return error
    }
)

🌿响应拦截器

对返回的响应做预处理

axios.interceptors.response.use(
    function (response) {
        // 状态码2xx时处理
        return response
    },
    function (error) {
        // 状态码超出2xx时处理
        return error
    }
)

🌿拦截器移除

const interceptor = axios.interceptors.response.use(...)

axios.interceptors.request.eject(interceptor)

封装

src/utils/request.js

import Axios from 'axios'

const axios = Axios.create({
  baseURL: 'https://api.test.com/',
  timeout: 5000,
})

axios.interceptors.request.use((config) => {
  
}, (error) => {
  
})



export function ApiGet(url, params = {}, config = {}) {
  return axios.get(url, {
    params,
    ...config
  })
}