axios发送请求语法

a) `axios.get(url[, config])`

请求参数通常通过 config.params 或直接拼接在 URL 中。

// 方式1：通过 params 配置项（推荐，会自动进行 URL 编码）
axios.get('/api/user', {
  params: {
    ID: 12345,
    name: 'John Doe'
  }
})

// 方式2：直接拼接 URL
axios.get('/api/user?ID=12345&name=John%20Doe')

b) `axios.post(url[, data[, config]])`

用于提交数据（例如，创建新资源）。数据作为请求体发送。

// 提交 JSON 数据
axios.post('/api/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
// 提交表单数据 (需要使用 URLSearchParams 或 FormData)
const formData = new FormData();
formData.append('username', 'admin');
formData.append('password', '123456');
axios.post('/api/login', formData, {
  headers: {
    'Content-Type': 'multipart/form-data' // Axios 会自动设置，但显式指定更清晰
  }
});

通用的请求方法 `axios(config)`

这是最核心、最强大的请求方式。所有别名方法最终都是通过调用这个方法实现的。当你需要高度自定义请求时，应该使用它。

// 发送一个 POST 请求
axios({
  method: 'post', // 请求方法
  url: '/api/user/12345', // 请求 URL
  data: { // 请求体数据
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  params: { // URL 查询参数
    action: 'update_profile'
  },
  headers: { // 自定义请求头
    'X-Requested-With': 'XMLHttpRequest',
    'Authorization': 'Bearer YOUR_TOKEN_HERE'
  },
  timeout: 5000 // 请求超时时间
})

3. 创建实例 `axios.create([config])`

当你需要为不同的后端服务或不同配置的请求创建一个“预设”的客户端时，创建实例非常有用。实例拥有与 axios 相同的方法，但会继承创建时指定的配置。

// 创建一个用于访问 JSONPlaceholder API 的实例
const jsonPlaceholderApi = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

// 使用这个实例发送请求，无需再写完整的 URL
jsonPlaceholderApi.get('/todos/1')

jsonPlaceholderApi.post('/posts', {
  title: 'foo',
  body: 'bar',
  userId: 1,
})

// 创建另一个用于访问私有 API 的实例，带有认证信息
const privateApi = axios.create({
  baseURL: 'https://api.my-private-service.com/v1',
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  }
});
privateApi.get('/user/profile');

二、Axios 核心配置选项

这些配置选项可以在任何请求方法（别名方法、通用方法、实例创建）的 config 对象中使用。

配置项	类型	默认值	描述
`url`	`string`	必需	用于请求的服务器 URL。
`method`	`string`	`get`	请求方法，如 `get`, `post`, `put`, `delete` 等。
`baseURL`	`string`	`''`	将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。在 `axios.create` 中设置非常方便。
`headers`	`object`	`{}`	自定义请求头。常见如 `Content-Type`, `Authorization`。
`params`	`object`	`null`	即将与请求一起发送的 URL 参数。必须是简单对象或 `URLSearchParams` 对象。Axios 会将其序列化并追加到 URL 后。
`data`	`object`, `string`, `Buffer`	`null`	作为请求体被发送的数据。适用于 `post`, `put`, `patch` 等方法。
`timeout`	`number`	`0` (无超时)	请求超时的毫秒数。如果请求时间超过 `timeout`，请求将被中断。

三、重要补充：拦截器和取消请求

1. 拦截器

拦截器允许你在请求或响应被 then 或 catch 处理之前拦截它们。这对于添加全局逻辑（如认证、错误处理）非常有用。

请求拦截器

// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 例如：从 localStorage 获取 token 并添加到请求头
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    console.log('Request is being sent:', config);
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

响应拦截器

// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    // 例如：只返回 response.data，简化后续处理
    console.log('Response received:', response);
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    // 例如：统一处理 401 未授权错误
    if (error.response && error.response.status === 401) {
      console.error('Unauthorized, logging out...');
      // 清除 token 并跳转到登录页
      localStorage.removeItem('authToken');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

一、`axios.request()` 的基本用法

axios(config) 和 axios.request(config) 在功能上是完全一样的。它们是 Axios 提供的两种等效方式，用于发起一个通用的 HTTP 请求。

axios.request(config) 接受一个配置对象作为参数，并返回一个 Promise，该 Promise 在请求成功时解析为响应对象，在失败时被拒绝。

示例：发送一个 GET 请求

axios.request({
  method: 'get', // 指定请求方法
  url: '/api/user', // 请求的 URL
  params: { // URL 查询参数
    ID: 12345
  }
})

示例：发送一个 POST 请求

axios.request({
  method: 'post',
  url: '/api/user',
  data: { // 请求体数据
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  headers: {
    'Content-Type': 'application/json'
  }
})

我要是在axios.post中配置param，会把数据拼接到请求url后面吗？

答案是：不会。 如果你直接在 axios.post 中配置 params 参数，这些数据不会被拼接到请求 URL 后面，而是会被忽略。

http.js数据处理

/**
 * options = {};
 * options.token = ''; // 存储 token 信息
 * options.config = {}; // axios 配置
 */
-->输入参数：
let params = {
          'token': token,
          'config': {
            'timeout': 25000
          }
      };
this.http = new http(params);
-->构造函数
constructor(options = {})
//配置添加config属性
this.options = this.normalizeOptions(options);
{
    'token': token,
    'config': {
    	'timeout': 25000,
        timeout: 5000,
        withCredentials: true,
    }
};
//token初始化
this.token = this.options.token || "";

-->使用这里的doGet或者doPost方法

//请求拦截器(发送请求前)
//使用normalizeRequestInterHandler配置请求头(鉴权参数、token等)
//实际上并没有具体配置，调用的时候没有提供options
normalizeRequestInterHandler(config, options) {
config.headers = assign(config.headers, options || {});}
//发送请求得到响应之后
-->成功 code=0
	listener.onSuccess
-->响应，但 code!=0
	加入缓存
-->异常
    listener.onFailed


// setToken(token)函数触发
-->更新缓存token信息
setUpdateChacheTokenHandler

//外部调用
// 重新发送缓存中的请求
restartCachedRequest()
// cancel缓存中的请求
cancelCachedRequest()

HttpApi

//构造函数
constructor(bizcode, password){
    //构建配置
    let params = {
      'token': token,
      'config': {
        'timeout': 25000
      }
    };
  // 设置请求拦截方法(这里没处理)
  this.http.setRequestInterceptors(this.generateRequestInterceptor.call(this));
  
  // 设置普通业务请求错误是否缓存处理
  //code!==0的情况对response处理(决定是否缓存或者错误)
  //鉴权失败(由于时间相关问题)和token过期都允许请求加入缓存
  this.http.setNormalizeResponseHandler(this.errorInterceptionHandler.call(this));
    //时间问题->更新timeDifference，这样在请求拦截中就能得到更新请求头
    //token过期问题
    //token过期且当前没有正在更新token时，更新token
    
  // 设置axios请求异常处理
  this.http.setNormalizeAbnormalHandler(this.axiosErrorDeal);
}

新请求拦截

generateRequestInterceptor() {
      return async config => {
        // let Nonce = generateNonce(8);
        let netAuth = new networkAuth(this.bizcode, this.password, timeDifference).make();
//netAuth结构
{
  authguid: authguid,
  authtimestamp: authtimestamp,
  authbizcode: this.bizcode,
  // authtokenOrigin: authtokenOrigin,
  authtoken: authtoken
};
	//添加属性成为鉴权头(还有公共头部信息)
        const realHeaders = assign(netAuth || {}, { sucUserToken: token }, this.commonHeader || {});
     
        // todo 暂时去除请求头鉴权
        // config.headers = assign(config.headers, realHeaders);

        // config.headers['interfaceSignKey'] = await setreQheader(config, token, Nonce);
        // config.headers['nonce'] = Nonce;
        return config;
      };
    }

总结：

-->构造函数调用
//配置http参数
this.http = new http(params);
// 设置普通业务请求错误是否缓存处理
this.http.setNormalizeResponseHandler(this.errorInterceptionHandler.call(this));
// 设置axios请求异常处理(异常翻译器)
this.http.setNormalizeAbnormalHandler(this.axiosErrorDeal);

//主动调用更新token
//更新成功->pinia用户存储token改变->缓存请求换token
updateToken()

//doGet || doPost
params.token = token;
//为请求参数配置添加token 这个是在数据方面添加的

//提供工具：
/**
 * 获取url指定参数
 * @param {String} name: 目标参数
 * @return {String || null} token
 * */
function getUrlOneParam(name)
export const getUrlStr = getUrlOneParam;
/**
 *  获取url中的token
 */
function getToken1()
export const getToken = getToken1;

httpService

//httpService是一个对象

httpApi: new HttpApi('0001', 'iflytek!@#123student')
//响应体json化处理 封装
doGet(url, params, listener)
//未处理
doPost(url, params, listener)
//模仿axios method =  | |
promiseDoRequest(url, params, method)
dealResponse(response) {
    const result = response.result;
    try {
      return typeof result === 'string' ? JSON.parse(result) : result;
    } catch (error) {
      return result;
    }
  },

a) axios.get(url[, config])

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

通用的请求方法 axios(config)

3. 创建实例 axios.create([config])