#说明

各种对于网络请求的封装,不同时间会有不同需求,当然,写法也更简洁

笔记分享：hongjilin
转载请注明出处。

一、axios封装写法1 -2020

该模块封装于2020疫情本人撰写 nodejs+vue搭建校园疫情防控系统实战项目(全栈项目)项目期间,主要用于项目中前端部分前后端交互功能实现中

文件上传模块 hongjilin 2020年7月29日

Ⅰ-代码示例

该代码用于Vue项目中

```javascript //main.js

import axios from ‘axios’ axios.defaults.baseURL = ‘http://localhost:3000‘; /**

• //封装axios方法,为不需要登录操作时使用,也可以提前传入token
• @param options 配置 */ let Axios= (options)=>{ axios({

   url:options.url,
   method:options.method||'POST',
   data: options.data,
   params: options.data

  }).then(result=>{

   if (options.success)  options.success(result.data)

  }).catch(err=>{

   let msg = err.response ? err.response.data:'请求异常'
   if (options.error){
       options.error(msg)
       Message.error({message: msg, offset: 150});
   }else {
       Message.error({message: msg, offset: 150});
   }

  }) } //不拦截的(不带token)往往用在vue创建前的生命周期中 Vue.prototype.$Axios = Axios ```

Ⅱ-使用示例

使用时因为是在main中将其挂载在了Vue实例上,所以可以直接this进行调用

 this.$Axios({
     url: "/students/gethealthNowDay",
     method: "get",
     data: {},
     success: (result) => { ... },
   });

二、axios封装写法2-2021

本代码于2021年在react项目中进行使用

1、带token进行请求

代码示例

默认带token进行请求

1. axios.defaults.withCredentials:登录之后的请求会带登录用户信息，需要把登录时的cookie设置到之后的请求头里面。而跨域请求要想带上cookie，必须要请求属性withCredentials=true，这是浏览器的同源策略导致的问题：不允许JS访问跨域的Cookie。
   withCredentials 属性是一个Boolean类型，它指示了是否该使用类似cookies,authorization，headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。
2. cancelTokenSource:取消ajax请求的

```tsx import axios from ‘axios’; const cancelTokenSource = axios.CancelToken.source(); const API_HOST=’https://gitee.com/hongjilin/hongs-study-notes‘ axios.defaults.withCredentials = true; //允许跨域携带cookie信息 function handleRequestToken(config: AxiosRequestConfig): void { const { url = ‘’ } = config; const token = “从数据库得到的token”;//此处需要从后台获取 if (token) config.headers[‘Token’] = token; else cancelTokenSource.cancel();//如果token为空或者错误,取消请求 }

// 创建axios实例 const Http = axios.create({ timeout: 1000 60 3, withCredentials: true, //前面已经设置默认为true,此处可以不设置 baseURL: ${API_HOST}, //设置基础路径 cancelToken: cancelTokenSource.token, //此处于前面存入token相互呼应 }); Http.interceptors.request.use( //请求拦截器,发送请求前运行的代码,主要用来打印日志方便调错 (config) => { config.headers[‘Content-Type’] = ‘application/json’; config.data = JSON.stringify(config.data); console.warn(‘—- Http request start —-‘); console.log(config.method, config.url); console.log(config.data || config.params); console.warn(‘—- Http request end—-‘); handleRequestToken(config); return config; }, (error) => { console.error(error); } ); Http.interceptors.response.use( //响应拦截器 (response) => { const data = response.data; // 打印结果 console.error(‘—- Http response start —-‘); console.log(response.config); console.log(response.config.url); console.log(response.data); console.error(‘—- Http response end —-‘); return data; }, (error) => { console.info(‘网络异常’); return Promise.reject(error); } );

export default Http;

<a name="86cad981"></a>
## 2、不带token进行请求
<a name="b5ea48ff-1"></a>
### 代码示例
> ```jsx
import axios from 'axios';
const cancelTokenSource = axios.CancelToken.source();
const API_HOST='https://gitee.com/hongjilin/hongs-study-notes'
axios.defaults.withCredentials = true;
// 创建axios实例
const NologinHttp = axios.create({
 timeout: 1000 * 60 * 3,
 withCredentials: true,
 baseURL: `${API_HOST}`,
 cancelToken: cancelTokenSource.token,
});
NologinHttp.interceptors.request.use(
 (config) => {
   config.headers['Content-Type'] = 'application/json';
   config.data = JSON.stringify(config.data);
   console.warn('--- NologinHttp request start ---');
   console.log(config.method, config.url);
   console.log(config.data || config.params);
   console.warn('--- NologinHttp request end---');
   return config;
 },
 (error) => {
   console.error(error);
 }
);
NologinHttp.interceptors.response.use(
 (response) => {
   const data = response.data;
   // 打印结果
   console.error('--- NologinHttp response start ---');
   console.log(response.config);
   console.log(response.config.url);
   console.log(response.data);
   console.error('--- NologinHttp response end ---');
   return data;
 },
 (error) => {
   console.info('网络异常');
   return Promise.reject(error);
 }
);
export default NologinHttp;

3、使用示例

此处分为两处代码,方便项目模块化开发,也可以直接在2处调用

1. CompanyApi声明—即调用请求

import { Http } from '~/utils';
interface IsPage{
  current:number,
  pageSize:number
}
export const CompanyApi = {
  /**
   * 
   * @param params 传入参数
   * @param page {current,pageSize} 当前页码与页码数
   * @returns 
   */
  getCompanyInfo(params, page:IsPage) {
    // return Http({
    // //服务端有要求: 将页数和页码拼接进url中 "/app/console/xxxx/1/10 ?name=" 这种格式
    //   url: '/app/console/company/' + currentPage + '/' + pageSize,
    //   method: 'GET',
    //   params,
    // });
    return Http.get(`/app/console/xxxx/${page.current}/${page.pageSize}/`,{params})
  },
  getIpInfo(params: any,page:IsPage) {
    return Http.get(`/app/console/xxxx/ip/${page.current}/${page.pageSize}/`,{params})
  },
  getShopInfo(params: any,page: IsPage) {
    return Http.get(`/app/console/xxxx/store/${page.current}/${page.pageSize}/`,{params})
  },
};

1. 请求后对数据处理

import { CompanyApi } from '~/api';
const { getIpInfo } = CompanyApi;
getData = async () => {
    try {
      const params = getParams(this.searchParams);//获取用户输入参数
      this.searchParams.loading = true; //加载中效果
      let result: IResult = await getIpInfo(params, this.page);
      if (result?.code !== 200) SuperNotification.error({ msg: result?.message });
      this.datas = result?.data?.data || [] 
      this.page.total = result?.data?.total || 0
    }
    catch (error) {
      SuperNotification.error({ msg: error });
    } finally {
      this.searchParams.loading = false;
    }
  }