如何介绍weapp-axios做网络请求？

1. 简要介绍weapp-axios：weapp-axios是一个基于Promise的小程序网络请求库，它是对axios的封装，提供了类似于axios的API风格，使得在小程序中进行网络请求更加方便和简洁。

2. 强调weapp-axios的特点和优势：

   • 简洁易用：weapp-axios提供了类似于axios的API风格，使用起来非常直观和方便。
   • 支持拦截器：weapp-axios支持请求和响应的拦截器，可以在请求发送前和响应返回后进行一些自定义的操作，如添加请求头、修改请求参数、处理错误等。
   • 支持并发请求：weapp-axios支持同时发送多个请求，并可以通过Promise.all等方法来处理并发请求的结果。
   • 支持取消请求：weapp-axios支持取消请求，可以通过创建一个cancel token来取消正在进行的请求。
   • 支持链式调用：weapp-axios的API支持链式调用，可以在一个请求中

说明

• 由于平台的限制，小程序项目中不支持 axios
• 而且原生的 wx.request() API 功能较为简单，
  • 不支持拦截器等全局定制的功能

步骤

1. 打开项目所在的目录，进行初始化：npm init -y
2. 再下载第三方包：npm i weapp-axios
3. 创建文件：utils/http.js，配置请求信息

import instance from 'weapp-axios'
const axios = instance.create({
   baseURL: '基地址路径'
})

  // 请求拦截器
axios.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  // console.log('请求被拦截了')
  return config;
}, function(error) {
  // 对请求错误做些什么
  return Promise.reject(error);
})

  // 响应拦截器
axios.interceptors.response.use(function(response) {
  // 对响应数据做点什么
  return response.data;
}, function(error) {
  // 对响应错误做点什么
  return Promise.reject(error);
})

   // 挂载到uni上支持全局使用
uni.$http = axios

4. 在main.js中导入文件

import App from './App'
import './utils/http.js'

5. 在生命周期函数 onLoad() 测试是否配置成功

onLoad() { 
    // 调用 methods 中的函数
    this.getSwiperList() 
}, 
methods: { 
    // 获取轮播图数据源 
    async getSwiperList() { 
    const res = await uni.$http.get('/home/swiperdata')
    console.log(res)
    }
 }