Uniapp-封装API拦截器

1.创建文件夹utils/http.js

//基地址
const baseURL = 'https://xxxxxxxxxxx'
创建请求前拦截器
const httpInterceptor = {
  // 拦截前触发
  invoke(options) {
    // 1.非http开头的需要拼接基地址
    if (!options.url.startsWith('http')) {
      options.url = baseURL + options.url
    }
    // 2.设置请求延迟时间
    options.timeout = 10000
    // 3.设置请求小程序端请求标识
    options.header = {
      'source-client': 'miniapp'
    }
    // 4.添加token标识符
    // const token=this.$store.userinfo.token
    // if(token){
    //   options.header.Authorization=token
    // }
  }
}

//request请求
uni.addInterceptor('request', httpInterceptor)
//文件上传
uni.addInterceptor('uploadFile', httpInterceptor)

//返回Promise对象
export const axios = (options) => {
  return new Promise((resove, reject) => {
    uni.request({
      ...options,
      // 1. 成功请求处理
      success(res) {
      // 1.2 成功状态码接收数据
        if(res.statusCode>=200&&res.statusCode<300){
        resove(res.data)
        }else if(res.statusCode===401){
          // 1.2身份认证失败
          // 1.2.1显示提示框
          // 1.2.2点击确定，清空用户信息，跳转登录页
          reject(res)
        }else{
          // 1.3其他错误
         uni.$showMsg('其他错误', 1500)
          reject(res)
        }
      },
      // 2.失败处理
      fail(err){
        uni.$showMsg('网络错误！',1500)
        reject(res)
      }
    })
  })
}

1.2 封装API

创建根目录API下创建home.js

import { axios } from "../utils/http";
// 获取轮播图数据
export const getswiperdataAPI = () => {
  return axios({
    method: 'GET',
    url: '/api/xxxxx',
  })
}

1.3 页面中使用

<script>
//导入api
  import {getswiperdataAPI} from '../../API/home.js'
  export default {
    data() {
      return {
        list: []
      };
    },
//一进页面就渲染
    onLoad() {
      this.getnum()
    },
    methods: {
//请求函数
      async getnum() {
        const res = await getswiperdataAPI()
        console.log(res);
        this.list = res.message
      },
    }
  }
</script>