uniapp encapsulation api request method 1

1. Create the folder api first, including index.js and request.js (the users.js file is used to encapsulate the request of a certain module, such as mine, homepage, news page, etc.) 2. Open the request and put the following

code put it in

const http = {
    
    
  // baseUrl 地址
  baseUrl: 'https://tst-api.scachealth.com',
  // 请求方法
  request(config) {
    
    
    // config: 请求配置对象，具体的值参照uniapp文档
    config = beforeRequest(config)
    config.url = this.baseUrl + config.url
    // 创建一个promise对象，在里面发送请求
    return new Promise((resolve, reject) => {
    
    
      uni.request(config).then(res => {
    
    
        let [error, resp] = res
        const response = beforeResponse(resp)
        resolve(response)
      }).catch(err => {
    
    
        errorHandle(err)
        reject(err)
      })
    })
  },
  get(url, data, auth = true) {
    
    
    /*
      url: 请求地址
      data: 请求数据
      auth: 请求是否需要携带token进行认证, 默认需要token，不需要则传入false
    */
    return this.request({
    
    
      url: url,
      data: data,
      auth: auth,
      method: 'GET',
    })
  },
  post(url, data, auth = true) {
    
    
    /*
      url: 请求地址
      data: 请求数据
      auth: 请求是否需要携带token进行认证, 默认需要token，不需要则传入false
    */
    return this.request({
    
    
      url: url,
      data: data,
      auth: auth,
      method: 'POST',
    })
  },
}

// 请求拦截器
const beforeRequest = (config) => {
    
    
  // 请求之前的做的操作
  let token = uni.getStorageSync('token')
  config.header = {
    
    }
  if(config.auth) {
    
     // 如果congfig.auth 有值，说明需要token认证
    if(!token){
    
    
      // 没有登录，无访问权限，需要去登录
      return uni.navigateTo({
    
    
        url: '/pages/user/login'
      })
    }
    // 在请求头中添加一个token
    config.header['Authorization'] = 'Bearer ' + token
    return config
  }
  return config
}

// 响应拦截器
const beforeResponse = (response) => {
    
    
  let res = response.data
  // 判断token是否过期，过期则将本地token清空，跳转到登录页
  switch (res.code) {
    
    
    case 400:
      uni.clearStorageSync() // 清空本地所有缓存
      uni.navigateTo({
    
     // 跳转至登录页
        url: '/pages/user/login'
      })
      uni.showToast({
    
     // 提示用户
        title: '登录状态已过期，请重新登录',
        duration: 1500,
        icon: "none"
      })
      return
    case 1000:
      uni.showToast({
    
     // 提示用户
        title: res.msg,
        duration: 1500,
        icon: "none"
      })
      return
    case 10000:
      uni.clearStorageSync() // 清空本地所有缓存
      uni.navigateTo({
    
     // 跳转至登录页
        url: '/pages/user/login'
      })
      uni.showToast({
    
     // 提示用户
        title: '登录状态已过期，请重新登录',
        duration: 1500,
        icon: "none"
      })
      return
    case 10030:
      return uni.showToast({
    
    
        title: res.msg,
        duration: 1500,
        icon: "none"
      })
    default:
      return res
  }
}

// 异常处理
const errorHandle = (err) => {
    
    
  
}

export default http

3. Open index.js, encapsulate specific requests, and import other module page requests into it

// 封装具体的接口调用
import users from './users.js'
export default {
    
    
  users
}

4. Contents in the uses.js file

// 用户模块接口请求
import http from './request.js'
export default {
    
    
  // 登录接口
  login(data) {
    
    
    return http.post('/api/user/login', data, false) // false是因为登录不需要token
  }
}

5. Mount the api globally, open the main.js file, and put the following code into

// 导入封装的请求对象
import api from './api/index.js'
Vue.prototype.$api = api

6. Use in the page

let loginForm = {
    
     // 参数
	phone: '139xxxxxxx',
	smsCode: 13525,
}
const res = this.$api.users.login(loginForm)