【前端Axios】最常用的Axios配置

项目常见的axios配置

基本配置
1.导入 axios 依赖
2. 创建 axios 实例
3. axios 拦截器
4. 请求参数配置
5. 响应数据结构

---

引入方式

//执行命令 npm install axios
import axios from 'axios'
//我是demo学习，故而如下方式引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

let BaseURL = "https://passport.youkuaiyun.com";
let Url = "/login?code=public";
// 使用由库提供的配置的默认值来创建实例
let Axios = axios.create({
    baseURL: BaseURL,
    // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL。
    timeout: 3000,
    // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)。
    // 如果请求pedding超过 `timeout` 的时间，请求将被中断。
});
Axios.defaults.headers.common['content-type'] = 'application/x-www-form-urlencoded'; //在实例已创建后修改默认值.
Axios.get(url,{params:data});

// 添加请求拦截器
Axios.interceptors.request.use((req) => {
    //发送请求之前的操作
    req.defaults.headers.common['Authorization'] = AUTH_TOKEN; //携带token
}, (err) => {
    //对请求错误的操作
    return Promise.reject(error);
});

// 添加响应拦截器
Axios.interceptors.response.use((res) = {
    //请求响应，对响应数据的操作
}, (err) => {
    //对响应错误的操作
    return Promise.reject(error);
})

// 请求数据结构，参数配置主要分get 和 post 方式。
let getReqConfig = {
    url: Url,
    method: "get", // `method` 是创建请求时使用的方法
    // `params` 是即将与请求一起发送的 URL 参数
    // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
    params: {
        ID: 12345
    },
};

let postReqConfig = {
    url: Url,
    method: "post",
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    },
    // 响应数据类型:'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    responseType: 'json', // default
    // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
    // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
    auth: {
        username: 'admin',
    },
    // `transformRequest` 允许在向服务器发送前，修改请求数据
    // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
    // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
    transformRequest: (data) => {
        // 对 data 进行任意转换处理
        return data
    },
    // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
    transformResponse: (data) => {
        // 对 data 进行任意转换处理
        return data
    },
    // 'proxy' 定义代理服务器的主机名称和端口
    // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
    // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
    proxy: {
        host: 'localhost',
        port: 8080,
        auth: {
            username: 'mikeymike',
            password: 'rapunz3l'
        }
    },
    // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
    // 如果设置为0，将不会 follow 任何重定向
    maxRedirects: 5, // default
    // `maxContentLength` 定义允许的响应内容的最大尺寸
    maxContentLength: 2000,
}

//响应数据结构
let repStructure = {
    data: {}, // `data` 由服务器提供的响应
    status: code, // `status` 来自服务器响应的 HTTP 状态码
    statusText: "OK", // `statusText` 来自服务器响应的 HTTP 状态信息
    headers: {}, // `headers` 服务器响应的头
    config: {}, // `config` 是为请求提供的配置信息
};

常见axiosAPI

axios(Url).then((res) => {//不指定method，默认get
    console.log(res);
}).catch((err) => {
    console.log(err);
});

axios.request(config)
axios.get(url [，config])
axios.delete(url [，config])
axios.head(url [，config])
axios.post(url [，data [，config]])
axios.put(url [，data [，config]])
axios.patch(url [，data [，config]])

axios.all([axios1,axios2]).then((res1,res2)=>{//并发请求
    console.log(res1);
    console.log(res2);
})

Axios官方文档链接: axios中文文档|axios中文网.