05-request%26store

request

对uni.request()做了一层单独的封装，拦截请求头参数，设置响应参数等。

import store from '@/store/index';
import { TOKEN_KEY } from '@/config/storage-key';
import APIConfig from '@/config';
let baseUrl = '';
if (process.env.NODE_ENV === 'development') {
  console.log('开发环境');
  baseUrl = 'https://gmall-prod.atguigu.cn/skb';
} else {
  console.log('生产环境');
  baseUrl = 'https://gmall-prod.atguigu.cn/skb';
}
class Service {
  api(opts = {}) {
    // 监听网络状态
    uni.onNetworkStatusChange((res) => {
      if (!res.isConnected) {
        console.log('网路无链接');
        uni.showToast({
          title: '网络连接不可用！',
          icon: 'none',
        });
      }
      return false;
    });
    // 定义参数对象
    if (!opts.method) opts.method = 'get';
    if (opts.domain) baseUrl = opts.domain;
    // 鉴权
    let token = store.state.token;
    let authorize = '';
    if (uni.getStorageSync(TOKEN_KEY)) token = uni.getStorageSync(TOKEN_KEY);
    if (uni.getStorageSync('Authorization'))
      authorize = uni.getStorageSync('Authorization');
    const header = {
      token,
      'Content-type': 'application/json; charset=UTF-8',
      appid: APIConfig.appid,
    };
    // 删除鉴权
    if (opts.noAuth) {
      delete header.Authorization;
    }
    uni.showLoading();
    console.log(opts);
    return new Promise((resolve, reject) => {
      uni.request({
        url: baseUrl + opts.url,
        data: opts.data,
        method: opts.method,
        header,
        success: (res) => {
          console.log('res', res);
          uni.hideLoading();
          if (res.statusCode === 200) {
            if (res.data.code == 200) {
              resolve(res.data);
            } else if (res.data.code == 28004) {
              uni.showModal({
                title: '提示',
                content: '登录过期，请重新登录',
                success: function (res) {
                  if (res.confirm) {
                    uni.redirectTo({
                      url: '/pages/login/index',
                    });
                    uni.clearStorageSync();
                  } else if (res.cancel) {
                    console.log('用户不想登陆');
                  }
                },
              });
              resolve(res.data);
            } else {
              uni.showToast({
                title: res.data.message,
                icon: 'error',
                duration: 1500,
              });
              reject(res.data);
            }
          }
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({
            title: 'net error!',
            icon: 'none',
            duration: 2000,
          });
        },
      });
    });
  }
  get(options = {}) {
    options.method = 'GET';
    return this.api(options);
  }
  post(options = {}) {
    options.method = 'POST';
    return this.api(options);
  }
  pus(options = {}) {
    options.method = 'PUT';
    return this.api(options);
  }
  delete(options = {}) {
    options.method = 'DELETE';
    return this.api(options);
  }
}
export default Service;

这里http主要做了几件事

• 根据NODE_ENV设置不同的baseUrl
• 根据不同method处理不同的请求
• 设置token，token从store当中获取，存入了localstorage
• 请求加载loading
• 请求失败提示toast
• token过期提示重新登陆

  store

  ```javascript

import Vue from ‘vue’; import Vuex from ‘vuex’; import { TOKEN_KEY, USER_KEY } from ‘@/config/storage-key’; Vue.use(Vuex); // 可测试token：eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJndWxpLXVzZXIiLCJpYXQiOjE2NjE0OTQ5OTQsImV4cCI6MTY2Mjk2NjIyMywiaWQiOiIxIiwibmlja25hbWUiOiLlvKDlsI8ifQ.IVkvP_NJmoDGaTmEbRYZKt80ybOA7g795ku1ZmdwQsI const store = new Vuex.Store({ state: { token: uni.getStorageSync(TOKEN_KEY) || ‘’, user: JSON.parse(uni.getStorageSync(USER_KEY) || ‘{}’), }, getters: {}, mutations: { setUser(state, user) { state.user = user; uni.setStorageSync(USER_KEY, JSON.stringify(user)); }, setToken(state, token) { state.token = token; uni.setStorageSync(TOKEN_KEY, token); } }, actions: { /**

 * @description: 设置用户信息参数
 * @param {*} commit
 * @param {*} payload
 * @return {*}
 */
setUser({ commit }, payload) {
  commit('setUser', payload);
},
/**
 * @description: 设置token
 * @param {*} commit
 * @param {*} payload
 * @return {*}
 */
setToken({ commit }, payload) {
  commit('setToken', payload);
},

}, modules: {}, }); export default store;

在`main.js`中需要注册一下store
```javascript
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
import store from '@/store/index';
const app = new Vue({
  ...App,
  store
})
app.$mount()

storage-key

// 本地存储token的key
export const TOKEN_KEY = 'token';
// 本地存储用户信息的key
export const USER_KEY = 'user';

测试request

先写个测试用的login接口

import Service from '@/utils/http';
class User extends Service {
  /**
   * @description: 小程序登陆接口
   * @param {*} options
   * @return {*}
   */
  login(options = {}) {
    console.log(123);
    options.url = `/api/ucenter/webChat/callback?code=${options.code}`;
    return this.get(options);
  }
}
const userService = new User();
export default userService;

在user页面去测试登陆接口是否能发送请求

<template>
  <view class="content"> 我的 </view>
</template>
<script>
import userService from "@/services/user";
export default {
  name: "user",
  onLoad() {
    this.login();
  },
  methods: {
    // 请求登陆接口
    async login() {
      console.log(1);
      try {
        const res = await userService.login({
          code: "123",
        });
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.content {
  background: red;
}
</style>

request请求正常