uni requset 请求全面配置（token,全局拦截）详解

uni requset 请求配置详解

这套配置可适用于token验证也可以适用其他
主要需求自己创建3个js文件：

1. index.js 接口管理
2. interface.js 请求拦截管理
3. config.js 请求配置
   

index.js

import https from '../../interface'

/**
 * 将所有接口统一起来便于维护
 * 如果项目很大可以将 url 独立成文件，接口分成不同的模块
 * handle [boolean] 如果需要自己处理 catch 请求 ，传入 true ，交给接口统一处理 ，请传如 false或不传
 */
// 默认全部导出
export default {
    // 登录
     login: (data) => {
        return https({
            url:'/user/login',
            data
        })
    },
    // 注册
     register: (data) => {
        return https({
            url:'/user/register',
            data
        })
    },
}

main.js中注入

import http from './comm/api/index'
Vue.prototype.$http = http

interface.js

import _config from './config'; // 导入私有配置
// 这里service是自己做的本地信息存储封装的一个配置文件，方便管理使用
import service from './service'; // 这里是之前项目配置本地存储账号信息的，不需要可以删除

export default function $http(options) {
    // 进行url字符串拼接，_config.url是再config中配置要请求的域名或者id+端口号这样方便管理，
    // options.url是index中请求配置的，完美拼接
  options.url = _config.url + options.url;
  return new Promise((resolve, reject) => {
    // 拦截请求
	_config.header.Authorization=service.getToken()//这里是调用本地存储配置文件的方法不需要可以改下面这种方式
	//_config.header.Authorization=uni.getStorageSync(STATE_KEY);
    _config.complete = (response) => {
       // 登录失效这边后台是返回403看情况
	   if(response.data.code === 403){
	   //返回登录界面
	       uni.navigateTo({
		   	url:'/pages/login/login'
		   })
		   uni.showToast({
		        icon: 'none',
		        title: '登录已失效'
		    });
		    //清空token
			service.addToken('')
	   }
      //  request請求访问成功  这里返回的时候response.data才是请求返回的结果
      if (response.data.code === 200) {
          // 接口请求成功
          resolve(response.data);
      } else {
         // 接口请求失败
		  resolve(response.data)
        // 处理catch 请求，不在本页面之外处理，统一在这里处理
				if(options.handle){
					reject(response)
				}else{
					try {
					  Promise.reject(response).catch(err => {
					    // console.error(err);  
					    _page_error(response.statusCode || response.errMsg);
					  });
					} catch (e) {
					  console.log(e)
					}
				}
      }

    }
    // 开始请求
    uni.request(Object.assign({},_config, options));
  })
}

// 接口錯誤
function _error(err, msg = '') {
  switch (err) {
    case 400:
      console.error(msg)
      // 错误码400的处理方式
      break;
  }
}
// request 錯誤
function _page_error(err) {
  switch (err) {
		case 401:
		  // 错误码404的处理方式
		  console.error("请求背拒绝")
		  break;
    case 404:
      // 错误码404的处理方式
      console.error("没有找到页面")
      break;
    case 405:
      console.error("错误的请求")
      break;
  }
}

config.js

//  http 请求配置项
export default {
    //  填自己的开发者服务器接口地址 
    url: "http://192.168.0.200:8080",
    //  请求的参数   
    data: {},
    //  设置请求的 header，header 中不能设置 Referer。
    header: {},
    //  （需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT  
    method: "POST",
    //  json    如果设为json，会尝试对返回的数据做一次 JSON.parse    
    dataType: "json",
    //  text    设置响应的数据类型。合法值：text、arraybuffer  1.7.0
    responseType: "text",
    //  收到开发者服务成功返回的回调函数    
    success() {},
    //  接口调用失败的回调函数 
    fail() {},
    //  接口调用结束的回调函数（调用成功、失败都会执行）
    complete() {},
}

service.js

// 登录状态
const STATE_KEY = 'STATE_KEY';
const getToken = function () {
    let ret = uni.getStorageSync(STATE_KEY);
    return ret;
}
const addToken = function (token) {
    uni.setStorageSync(STATE_KEY, token);
}
export default {
    getToken,
    addToken
}

调用接口测试

login(){
    let req={
		password:this.list.password,
		phone:this.list.tel
	}
	this.$http.login(req)
	.then(data=>{
		console.log(data)
	})
}

有什么优化,不足的还请大佬写在下方评论区