平台兼容性

插件使用说明

• 下载后把 request 文件夹 copy 到项目 common/ 目录下, common文件夹在根目录，如果没有请手动创建
• 配置优先级：拦截器配置 > 发送请求时配置 > 页面配置 > 全局配置

1、初始化（main.js文件）

// 引入 VUE
import Vue from 'vue'
// 引入插件
import request from '@/common/request/request.js'

// 全局配置
request.setConfig({
  baseUrl: 'https://www.cookegc.com', // 此为测试地址，需加入到域名白名单，或者更改为您自己的线上地址即可
  dataType: 'json', // 可删除，默认为json
  responseType: 'text', // 可删除，默认为text
  // 设置请求头，支持所有请求头设置，也可不设置，去掉header就行
  header: {
    'token': 'token from global',
    'content-type': 'application/json' 
  }
})

// 设置请求拦截器
request.interceptors.request(config => {
  // 配置参数和全局配置相同，此优先级最高，会覆盖在其他地方的相同配置参数

  // 追加请求头，推荐
  // config.header['content-type'] = 'application/json';
  // config.header.token = 'token from interceptors';

  // 覆盖请求头
  // config.header = {
    // 'content-type': 'application/json',
    // 'token': 'token from interceptors'
  // }

  // return false; // 终止请求
  // return Promise.reject('error from request interceptors'); // 向外层抛出错误，用catch捕获
  return config; // 返回修改后的配置，如未修改也需添加这行
})

// 设置响应拦截器
request.interceptors.response(res => {
  // 接收请求，执行响应操作
  // 您的逻辑......

  // return false;    // 阻止返回,页面不会接收返回值
  // return {message: '自定义值，来自拦截器'};   // 返回您自定义的值，将覆盖原始返回值
  // return Promise.reject('error from response interceptors') // 向外层抛出错误，用catch捕获
  return res; // 原样返回
})

// // 挂载到全局vue实例上，在页面中可以使用this.$request调用request实例下相应方法
Vue.prototype.$request = request;

2、 使用（具体页面中）

<template>
  <view class="container">  
    <button type="primary" @click="sendRequest1">发起请求(async/await)</button>
    <button type="primary" @click="sendRequest2">发起请求(then/catch)</button>
    <button type="primary" @click="getConfig">获取配置</button>
  </view>
</template>

<script>
// 单独引入到任意地方，此时request与this.$request指向同一个实例。
// import request from '@/common/request/request.js'
export default {
  onReady() {
    // 手动修改配置 setConfig方法会影响全局，请谨慎使用
    this.$request.setConfig({
      header: {
        'token': 'token from page on ready',
        'content-type': 'application/json'
      }
    })
  },
  methods: {
    getConfig() {
      console.log(this.$request.getConfig());
    },
    // 方式一  async/await 建议使用try/catch捕获错误，如下
    async sendRequest1 () {
      try {
        //   不修改请求头
        let res1 = await this.$request.get("/request/get", {
          data: {
            id: 1
          }
        });
        console.log(res1)

        // 修改请求头，配置参数与全局配置相同
        // let res2 = await this.$request.get('/request/get', {
        //   data: {
        //     id: 1
        //   },
        //   header: {
        //     'token': "token from page",
        //     'content-type': 'application/json'
        //   },
        //   dataType: 'json',
        //   responseType: 'text'
        // });
        // console.log(res2)

        // post请求
        // let res3 = await this.$request.post('/request/post', {
        //   data: {
        //     id: 1
        //   },
        //   header: {
        //     'token': "token from page",
        //     'content-type': 'application/json'
        //   },
        //   dataType: 'json',
        //   responseType: 'text'
        // });
        // console.log(res3)

      } catch (error) {
        console.error('error:',error);
      }
    },
    //方式二  then/catch
    sendRequest2 () {
      this.$request
      .get("/request/get", {
        data: {
          id: 1
        },
        header: {
          'token': "token from page",
          'content-type': 'application/json'
        },
        dataType: 'json',
        responseType: 'text'
      })
      .then(res => {
        console.log(res);
      })
      .catch(error => {
        console.error('error:',error);
      });
    }
  }
};
</script>

3、 温馨提示

如果遇到bug或者用的不开心，请下载最新版，或在评论区留言，作者会马上修复，谢谢。

4、鸣谢

感谢社区、感谢大家的批评指正。

谢谢使用。