uView JS网络请求

便捷工具：

• toast(title, duration = 1500)
  title toast的消息内容
  duration toast出现到消失的时间，单位ms，默认1500ms

this.$u.toast('Hello uView!');

• os()
  此属性用于返回平台的名称，为小写的ios或android

console.log(this.$u.os());

• sys()
  此属性用于获取设备的信息，相当于uni.getSystemInfoSync()的效果

console.log(this.$u.sys());

网络https://v1.uviewui.com/js/http.html

HTTP请求：

• 基本使用：
  get | post | put | delete(url, params, header).then(res => {}).catch(res => {})
• url 请求的URL，可以完整的URL(http开头)，或者是路径的一部分，这时会自动拼接上baseUrl(一般为api的域名部分)
• params 请求的参数，对象形式，如"{name: ‘lisa’, age: 23}"，该参数是可选的
• header 请求的header，对象形式，如果token等字段，建议通过配置写入，该参数是可选的

get和post都挂载在$u对象下，其中get和post使用方法完全一致，只是一个为this.$u.get，一个为this.$u.post,使用如下：

一般来说，只在then中接收返回值即可，catch无特殊情况，无需编写和理会，因为如果服务端返回的不是200状态，插件内部会弹出model提示

<template>
    <view> </view>
</template>

<script>
export default {
  data(){
    return {

    }
  },
  onLoad(){
      this.$u.post('http://www.example.com',{id: 'xxx',name;'xxx'}).then(res=>{
          console.log(res)
      });
      this.$u.get('http://www.example.com',{},{
          token: 'xxx'
      }).then(res=>{
          console.log(res)
      });
  }
}
</script>

配置：

提示
uView在1.1.0版本后，建议将拦截器内容部分，写入到独立的外部JS文件中，而不是写在App.vue中，这样有更好的可读性，可维护性。
uView已经为用户考虑好了所有的情况，并详细指导您如何在外部JS中引用vuex变量以及Vue的this实例等。
建议在根目录下新建/common/http.interceptor.js文件，也即创建common目录(如果没有的话)，再创建http.interceptor.js文件，将拦截器相关代码写在里面。

具体写法，建议在写在/common/http.interceptor.js(如无此文件夹和文件，请手动创建，一次配置，全局通用)，写完之后，请在根目录的main.js 的new Vue()和app.$mount()之间引入此文件，在newVue()后面的原因是，外部JS文件需要引用vue的实例，也即this对象，要等main.js中通过new创建了实例之后才能引用。在app.$mount()之前的原因是，在Vue挂载this实例(也即初始化App.vue)之前配置请求信息，所以在App.vue中也能正常发出请求。
main.js:

import Vue from 'vue';
import App from './App';
// 此为main.js本身已有内容
const app = new Vue({
    ...App
});

// http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径
import httpInterceptor from '@/common/http.interceptor.js';
// 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)
Vue.use(httpInterceptor, app);

app.$mount();

export default app;

http.interceptor.js:

// 这里的Vue为Vue对象(非创建出来的实例)，vm为main.js中"Vue.use(httpInterceptor, app)"这一句的第二个参数，
// 为一个Vue的实例，也即每个页面的"this"
// 如果需要了解这个install方法是什么，请移步：https://uviewui.com/components/vueUse.html
const install = (Vue, vm) => {
    Vue.prototype.$u.http.setConfig = {
        baseUrl: '', // 请求的本域名
        method: 'POST',
        // 设置为json，返回后会对数据进行一次JSON.parse()
        dataType: 'json',
        showLoading: true, // 是否显示请求中的loading
        loadingText: '请求中...', // 请求loading中的文字提示
        loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
        originalData: false, // 是否在拦截器中返回服务端的原始数据
        loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
        // 配置请求头信息
        header: {
            'content-type': 'application/json;charset=UTF-8'
        }
    };

    // 请求拦截，配置Token等参数
    Vue.prototype.$u.http.interceptor.request = config => {
        // 引用token
        // 方式一，存放在vuex的token，假设使用了uView封装的vuex方式
        // 见：https://uviewui.com/components/globalVariable.html
        // config.header.token = vm.token;

        // 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
        // config.header.token = vm.$store.state.token;

        // 方式三，如果token放在了globalData，通过getApp().globalData获取
        // config.header.token = getApp().globalData.username;

        // 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的
        // 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
        // const token = uni.getStorageSync('token');
        // config.header.token = token;
        config.header.Token = 'xxxxxx';

        // 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值
        if (config.url == '/user/login') config.header.noToken = true;
        // 最后需要将config进行return
        return config;
        // 如果return一个false值，则会取消本次请求
        // if(config.url == '/user/rest') return false; // 取消某次请求
    };

    // 响应拦截，判断状态码是否通过
    Vue.prototype.$u.http.interceptor.response = res => {
        if (res.code == 200) {
            // res为服务端返回值，可能有code，result等字段
            // 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
            // 如果配置了originalData为true，请留意这里的返回值
            return res.result;
        } else if (res.code == 201) {
            // 假设201为token失效，这里跳转登录
            vm.$u.toast('验证失败，请重新登录');
            setTimeout(() => {
                // 此为uView的方法，详见路由相关文档
                vm.$u.route('/pages/user/login');
            }, 1500);
            return false;
        } else {
            // 如果返回false，则会调用Promise的reject回调，
            // 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
            return false;
        }
    };
};

export default { install };