用 Taro.request 舉例。微信小程序和Uniapp 同理。

Axios

實現(xiàn)

/apis/request.ts

import axios from 'axios'
import settle from 'axios/lib/core/settle'
import buildURL from 'axios/lib/helpers/buildURL'
import createError from 'axios/lib/core/createError'

import { request } from '@tarojs/taro'

axios.defaults.adapter = (conf) => {
  return new Promise((resolve, reject) => {
    request({
      // 這里需要手動拼接 url
      url: buildURL(
        conf.baseURL || '' + conf.url || '', 
        conf.params, 
        conf.paramsSerializer
      ).replace(/^\?/, ''),
      method: String(conf.method).toLowerCase() as any,
      responseType: conf.responseType as any,
      data: conf.data,
      success (response) {
        const defResponse = {
          data: response.data,
          status: response.statusCode,
          statusText: 'sucess',
          headers: response.header,
          config: conf,
        }
        // 這里需要手動調(diào)用 settle 保證 validateStatus 可以生效
        settle(resolve, reject, defResponse)
        
      },
      fail: (response) => {
        reject(createError(
          response.errMsg,
          conf,
          null,
          null,
          response
        ))
      }
    })
  })
}

export const Request = axios

Note: 如果你需要訪問 request 對象，需要重新包裝 axios.create 函數(shù)。這里為了方便直接賦值給了 axios.defaults.adapter

使用

/apis/users.ts

import { Request } from './request'

const userApi = Request.create({
  baseURL: 'http://jsonplaceholder.typicode.com/users',
})

export function getUsers() {
  // 這里不傳無法通過類型校驗
  return userApi.get('')
}

getUsers().then(res => {
  users = res.data
})

@coloration/asker

下面介紹一個自己寫的一個客戶端請求工具，也可以使用 adapter 方式實現(xiàn)包裝

安裝

$ npm install @coloration/asker

實現(xiàn)

import { AskerAdapterConf, AskerResponse, Asker, AskerConf } from '@coloration/asker'
import { request } from '@tarojs/taro'

function requestAdapter (conf: AskerAdapterConf, defRes: AskerResponse) {
  return new Promise((resolve, reject) => {
    request({
      // Asker 會在 adapter 調(diào)用之前拼接好 uri 并保存到 conf 對象中
      url: conf.uri,
      method: String(conf.method).toLowerCase() as any,
      responseType: conf.responseType as any,
      data: conf.body,
      success (response) {
        defRes.status = response.statusCode
        defRes.data = response.data
        defRes.statusText = 'success'
        resolve(defRes)
        // validateStatus  Asker會在adapter 之后自動處理 validateStatus 這里不用手動調(diào)用
      },
      fail: reject
    })
  })
}

// 這里也是使用全局覆蓋的方法
Object.assign<AskerConf, AskerConf>(Asker.conf, {
  adapter: requestAdapter,
  // 這里需要注意 Asker 默認(rèn)的 responseType 是 'json', 
  // Taro.request 方法只支持 'text' 和 'arrayBuffer' 所以需要手動設(shè)置
  responseType: 'text',
  // Asker 中的 after方法相當(dāng)于 transResponse 
  // 但 axios 不能直接返回數(shù)據(jù)最少需要調(diào)用 res.data
  // 而 Asker 則可以直接通過這種方式格式化數(shù)據(jù)
  after: (res) => res.data
})

export const Request = Asker

使用

const userApi = new Request({
  baseUrl: 'http://jsonplaceholder.typicode.com/users',
})

export function getUsers() {
  return userApi.get()
}
// 可以直接拿到data
getUsers.then(data => {
  users = data
})

更多關(guān)于 Asker的功能可查看文檔 coloration.github.io 歡迎提出優(yōu)化建議