taro3 配代理、接口请求

一、配代理

config==>index.js 文件

 const ip = require('ip').address(); // 获取本机ip
  h5: {
   devServer: {
    host: ip,  // 以本机ip打开项目
    disableHostCheck: true,
    proxy: {
     '/api': {
      target: 'http://192.168.2.87:8080', // 后端地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
       }
      }
    }
  }
}

二、安装axios，封装请求 src==>utils==>service.js 可以根据自己的实际开发进行调整

import axios from 'axios';
import Taro from '@tarojs/taro'

const showErrorToast = (msg) => {
  Taro.showToast({
    title: msg,
    icon: 'none'
  })
}

// 创建axios实例
const service = axios.create({
  timeout: 30000, // 请求超时时间
  baseURL: '/api'
});

// request拦截器
service.interceptors.request.use(
 (config) => {
    Taro.showLoading({
        title: '加载中',
        mask: true
    })
    let tokenId = Taro.getStorageSync('tokenId');
    if (typeof tokenId == 'undefined') {
        tokenId = '';
    }
    config.headers = {
        'Content-Type': 'application/json;charset=utf-8',
         Authorization: tokenId
    };
    return config;
 },
 (error) => {
    // Do something with request error
    console.log(error); // for debug
    return Promise.reject(error);
  }
 );

// respone拦截器
service.interceptors.response.use(
  (response) => {
    Taro.hideLoading();
    if (response.data.isError) {
        showErrorToast(response.data.error.message)
        if (response.data.error.codeNumber === 904) { 
            // 登录失效
            Taro.navigateTo({
                url: '/pages/login/index'
            })
        }
    } else {
        return response;
    }
  },
  (error) => {
    Taro.hideLoading();
    console.log('err', error); // for debug
    showErrorToast(err.message)
    return Promise.reject(error);
  }
);

export default service;

三、接口统一写在api文件里面 src==>api==>login.js

import service from '../utils/service'
const loginApi = {
  // 登录
   login: (params) => service('/api/login', params)
}
export default loginApi

四、使用

import React, {  useEffect } from 'react'
import loginApi from '../../api/login'
const Home = (props) => {
    useEffect(() => { 
      loginApi.login({ username: 'admin', pwd: '123456' }).then(res => {
        console.log('res===', res.data)
     })
   }, [])
   return (
    <View className="home-page">home组件</View>
   )
}
export default Home;

结束，拜拜。