小程序中axios的使用

axios简介

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中

axios-miniprogram-adapter

  • axios的小程序适配器,支持微信、支付宝、钉钉、百度小程序
  • 支持TypeScript

使用方法

  1. npm i axios axios-miniprogram-adapter
  2. 工具->构建npm
  3. 引入
//http.js
import axios from 'axios'
import mpAdapter from 'axios-miniprogram-adapter'
axios.defaults.adapter = mpAdapter
  1. 用法参考axios
//http.js
import axios from 'axios'
import mpAdapter from 'axios-miniprogram-adapter'
axios.defaults.adapter = mpAdapter

import {
    
     loginRedirect } from './util'
import {
    
     store } from '../store/index'
let baseURL = ''
let headers = {
    
    }
export const http = axios.create({
    
    
  baseURL,
  headers,
})
const requestInterceptor = config => {
    
    
  config.headers.token = wx.getStorageSync('token')
  return config
}
const responseInterceptor = response => {
    
    
  console.log(response.config.url, response)
  if (response.data.code === 1) {
    
    
    return Promise.resolve(response.data)
  } else if (response.data.code === -1) {
    
    
    return wxp.login().then(({
     
      code }) => {
    
    
      return http
        .post('/auth/login', {
    
    
          code,
          source: 2,
        })
        .then(({
     
      data }) => {
    
    
          store.setUserInfo(data.userInfo)
          store.setMemberInfo(data.memberInfo)
          wx.setStorageSync('token', data.userInfo.token)
          return http(response.config)
        })
        .catch(error => {
    
    
          loginRedirect()
          return Promise.reject(error)
        })
    })
  } else {
    
    
    if (response.data.msg !== '用户未绑定小程序') {
    
    
      wx.showToast({
    
     title: response.data.msg, icon: 'none' })
    }
    return Promise.reject(response.data)
  }
}

const responseError = error => {
    
    
  return Promise.reject(error.message)
  if (error.response.status === 401) {
    
    
    loginRedirect()
  } else {
    
    
    wx.showToast({
    
     title: error.message || error.msg, icon: 'none' })
  }
}
//请求拦截器
http.interceptors.request.use(requestInterceptor)
//响应拦截器
http.interceptors.response.use(responseInterceptor, responseError)

/**
 * 上传图片
 * @param {String} tempFilePath 图片路径
 */
export const uploadImage = tempFilePath => {
    
    
  return wx.uploadFile({
    
    
    url: baseURL + '/weapp' + '/common/uploadali',
    filePath: tempFilePath,
    name: 'file',
    formData: {
    
    
      file: tempFilePath,
    },
    header: {
    
    
      'Content-Type': 'multipart/form-data',
      token: wx.getStorageSync('token'),
      ...headers,
    },
  })
}

/**
 * 统一支付方法
 * @param {'3' | '1'} payType - 支付方式:3:微信,1:余额
 * @param {Number} orderId - 订单id
 */
export const payMent = (payType, orderId) => {
    
    
  const tp = typeof payType
  if (tp !== 'string') {
    
    
    console.error('支付方式仅限字符串')
    payType = String(payType)
  }
  wx.showLoading({
    
    
    title: '支付中...',
  })
  if (payType === '1') {
    
    
    return http
      .post('/order/pay', {
    
    
        order_id: orderId,
        pay_type: payType,
      })
      .then(res => {
    
    
        wx.showToast({
    
    
          title: '支付成功',
          icon: 'none',
        })
        return Promise.resolve(res)
      })
      .catch(err => {
    
    
        wx.showToast({
    
    
          title: err.msg || '支付失败',
          icon: 'none',
        })
        return Promise.reject(err)
      })
  }
  if (payType === '3') {
    
    
    return http
      .post('/order/pay', {
    
    
        order_id: orderId,
        pay_type: payType,
      })
      .then(({
     
      data }) => {
    
    
        const pay = JSON.parse(data.pay)
        return wxp
          .requestPayment({
    
    
            timeStamp: pay.timeStamp,
            nonceStr: pay.nonceStr,
            package: pay.package,
            signType: pay.signType,
            paySign: pay.paySign,
          })
          .then(() => {
    
    
            wx.showToast({
    
    
              title: '支付成功',
              icon: 'none',
            })
          })
          .catch(err => {
    
    
            wx.showToast({
    
    
              title: '支付失败',
              icon: 'none',
            })
            if (err.errMsg === 'requestPayment:fail cancel') {
    
    
              err.errMsg = '用户取消支付'
            }
            return Promise.reject(err)
          })
      })
  }
}

const commonHttp = axios.create({
    
    
  baseURL,
  headers,
})

commonHttp.interceptors.request.use(requestInterceptor)
commonHttp.interceptors.response.use(responseInterceptor, responseError)

/**
 * 发送短信
 * @param {(String|Number)} mobile - 手机号
 * @param {'mobilelogin'} event - 事件
 */
export const sendSms = async (mobile, event) => {
    
    
  return commonHttp.get('/api/sms/send', {
    
    
    params: {
    
    
      mobile,
      event,
      from: 3,
    },
  })
}

Guess you like

Origin blog.csdn.net/weixin_43848576/article/details/117957237