uni-app封装一个request请求

1、项目下新建common文件夹，再创建request.js文件

2、打开request.js文件，开始写封装的代码
思路很简单

request.js参考代码如下

var apiUrl = 'https://www.xxxx.cn/qianwang.php/'; //后台接口的url

// #ifdef H5
var baseUrl = '';
if (process.env.NODE_ENV === 'development') {
    //本地环境，即开发环境
    baseUrl = '/api'
} else {
    //线上环境
    baseUrl = apiUrl
}
// #endif


//封装request请求
const sendRequest = (url, method = 'GET', data = {}, contentType) => {
    //判断header提交数据类型
    let types = '';
    if (method == 'POST' && !contentType) {
        types = 'application/x-www-form-urlencoded'
    } else if (method == 'POST' && contentType) {
        types = contentType
    } else {
        types = 'application/json';
    }

    // #ifdef H5
    var bases = baseUrl + '/' + url;
    // #endif

    // #ifndef H5
    var bases = apiUrl + '/' + url;
    // #endif

    var token = uni.getStorageSync('token') || ''; //从缓存中拿到登录token


    return new Promise(function (resolve, reject) {
        uni.request({
            url: bases,
            data: data,
            method: method,
            header: {
                'Content-Type': types,
                'Accept': 'application/json, text/javascript, */*; q=0.01',
                'token': token
            },
            success(res) {
                if (res.header.authorization || res.header.Authorization) {
                    uni.setStorageSync('token', res.header.authorization || res.header.Authorization);
                }
                var code = res.statusCode;
                //请求接口访问出错
                if(code!=200) {
                    console.log(res);
                    // uni.showModal({
                    //     title: '登录提示',
                    //     content: '身份已过期，请重新登录后再来操作！',
                    //     success: ress => {
                    //         if (ress.confirm) {
                    //             uni.redirectTo({
                    //                 url: '/pages/login/index'
                    //             })
                    //         }
                    //     }
                    // })
                }
                resolve(res.data);
            },
            fail(err) {
                reject(err);
            }
        })
    })
}

module.exports.sendRequest = sendRequest

3、在main.js全局注册

//封装一个uniapp请求
import http from 'common/request.js'
Vue.prototype.$http = http;

4、页面调用

   //调用后端接口，获取登录token
          this.$http.sendRequest("user/user/index", "GET", {
              code: res.code,
            })
            .then((res) => {
              console.log(res);
              //成功回调返回登录token
              var get_token = "123456"; //测试期间回调token写死
              uni.setStorageSync("token", get_token); //将返回的token储存在前端缓存（这是一个同步接口）
            })
            .catch((err) => {
              //请求失败
              console.log(err);
            });

<template>
  <view class="container">
    <view>
      <span @click="dianji">点击查看后端返回的token：{{ show_token }}</span>
    </view>
  </view>
</template>

<script>
export default {
  onLoad() {
    //获取小程序登录token(code换取后端token)
    uni.login({
      provider: "providerCode",
      success: (res) => {
        // console.log(res);//返回获取openid所需的code

        //返回code成功，用code请求后台，获取登录token
        if (res.errMsg == "login:ok") {
          //调用后端接口，获取登录token
          this.$http.sendRequest("user/user/index", "GET", {
              code: res.code,
            })
            .then((res) => {
              console.log(res);
              //成功回调返回登录token
              var get_token = "123456"; //测试期间回调token写死
              uni.setStorageSync("token", get_token); //将返回的token储存在前端缓存（这是一个同步接口）
            })
            .catch((err) => {
              //请求失败
              console.log(err);
            });
        }
      },
      fail: (error) => {
        reject(error);
      },
    });
  },
  data() {
    return {
      show_token: "",
    };
  },
  methods: {
    dianji() {
      this.show_token = uni.getStorageSync("token"); //从缓存从拿到登录token
      console.log(this.show_token);
    },
  },
};
</script>

成功显示