统计

随笔 - 89
文章 - 2
评论 - 3
阅读 - 29153

使用Promise封装api(axios, wx.request, uni.request)

1. 封装uni.request

 1 const BASE_URL = ' '
 2 export const myRequest = (options) => {
 3    return new Promise(resolve, reject){
 4        uni.request({
 5            url : BASE_URL + options.url,
 6            header: {
 7                 'content-type': 'application/x-www-form-urlencoded'
 8             },
 9            method : options.method || 'GET',
10            data : options.data || {},
11            success :(res) => {
12               if(res.data.status !== 0){
13                  return uni.showToast({
14                      title: '获取数据失败!'
15                  })
16               }
17               resolve(res)
18            },
19            fail: (err) => {
20               reject(err)
21            }
22        })
23    }    
24 }  
25 
26 //在main.js里 vue原型中全局注册
27 this.myRequest()调用

2. 封装wx.request()

与uni.request()大同小异

搬运
原链接http://t.csdn.cn/Vs6Uo
 
 
//env.js
//设置公共访问的url，即环境变量 
module.exports = {
    // 开发环境
     dev: {
       baseUrl: 'https://localhost:3000'
    },
    // 测试环境
    test: {
      baseUrl: 'https://localhost:4000'
    },
    // 线上环境
    prod: {
      baseUrl:  'https://localhost:5000'
    }  
  }
  
 
//request.js
// 引入env中的url
const { baseUrl } = require('./env.js').test   //测试环境
  // 专属域名
  module.exports = {
    request: (url, method = 'POST', data = {}) => {
      // console.log(baseUrl)
      let _url = `${baseUrl}${url}`
      return new Promise((resolve, reject) => {
        wx.showLoading({
          title:"正在加载"
        })
   
        wx.request({
          url: _url, //请求路径
          data: data,    //请求参数
          method: method,   //请求方法get和post
          header: {
            'content-type': 'application/x-www-form-urlencoded'  //请求头
          },
          success: (res) => {
            // console.log(res)
            if(res.data.ret == 200){
              wx.hideLoading()
              resolve(res.data)
            }else{
              wx.showToast({
                title: '数据请求失败',
              })
            }
            fail:(err)=>{
               reject(err.data)
            }
          }
        })
      })
    }
   
  }
  
//api.js
const { request } = require('./request')
module.exports = {
    getList: (data) => {
      return request('/GetList','get',data); //第一个参数为地址，第二个参数为请求方式，第三个参数为传递的参数
    }
  }

　3. 封装axios

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

引用http://t.csdn.cn/Wm2oB
 
 
 //封装代码http.js
/*
 * @Author: Mr Dong
 * @Date: 2022-03-08
 * @LastEditTime: 2022-03-09 
 * @LastEditors: Mr Dong
 */
import Vue from 'vue';
import axios from 'axios';
import qs from 'querystring'//序列化参数用
 
 
//决定是否过滤URL中的/api
let isFilterApi = !(process.env.NODE_ENV === 'development'); //线上环境还是本地环境,过滤/api
let _axios = axios.create({
  baseURL: '',
  withCredentials:true,//跨域请求时开启请求头可以携带cookie等信息
  timeout: 300000, //超时设置
  transformRequest: [function (data) {
    return data
  }],//处理请求格式用（这里不能少，否则content-type设置成multipart/form-data无效，具体原因未知）
  transformResponse: [function (data) {
    return data
  }]//处理返回格式用例如_axios.defaults.responseType = 'blob';
})
// 请求拦截器（如果不单独封装成多种单独的请求格式，判断将写在请求拦截中，自行考虑选用方式，个人觉得判断太多不如单独写）
_axios.interceptors.request.use(
  (config) => {
    return config
  }, // 发送请求前做的配置
  error => {  //请求错误处理
    Promise.reject(error)
}
);
// 响应拦截器
_axios.interceptors.response.use(
  (response) => response,
  (error) => Promise.reject(error), // 对请求错误做点什么
);
_axios.defaults.headers.common['Token'] = '1111'//token设置
//过滤/api
function filterApi(url) {
  url = isFilterApi? url:'/api'+url//跨域代理,开发环境自动添加'/api'
  return url
}
//通用请求错误提示
function _error(err){
  switch (Number(err.response.status)) {//这里字段根据自己项目修改
    case 400://一般是前台参数格式有问题
    Vue.prototype.$message({
            type: 'warning',
            showClose: true,
            message: '请求无效！'
        });
        break;
    case 404:
      Vue.prototype.$message({
            type: 'error',
            showClose: true,
            message: '未找到该接口'
        });
        break;
    case 500:
      Vue.prototype.$message({
            type: 'error',
            showClose: true,
            message: '服务器异常',
        });
        break;
}
}
 
//json格式post
export const JsonPost = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  _axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';
  delete _axios.defaults.responseType
  _axios.post(url, JSON.stringify(params)).then((res) => {
    //resolve(res.data);
    resolve(JSON.parse(res.data));
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//键值对格式post
export const FormDataPost = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  _axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
  delete _axios.defaults.responseType
  _axios.post(url, qs.stringify(params)).then((res) => {
    //resolve(res.data);
    resolve(JSON.parse(res.data));    
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//文件格式post，上传图片，文件等
export const FilePost = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  _axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
  delete _axios.defaults.responseType
  _axios.post(url, params).then((res) => {
    resolve(res.data);
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//返回格式为文件流，如导出excle文件流。
export const BlobPost = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  _axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';
  _axios.defaults.responseType = 'blob';
  _axios.post(url, JSON.stringify(params)).then((res) => {
    resolve(res.data);
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//get请求，这里注意和axios.get和axios.post请求参数格式的区别写法post{},get{params:{}}
export const get = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  delete _axios.defaults.responseType
  _axios.get(url, { params }).then((res) => {
    //resolve(res.data);
    resolve(JSON.parse(res.data));
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//第一种写法
//axios({method:'post',url:'',data:{}}
//axios({method:'get',url:'',params:{}})
//第二种写法，这里用的是第二种
//axios.get(url,{params:{}})
//axios.post(url,data:{})
//第三种写法不区分参数格式只用post格式，单独手动处理get的url，即手动序列化参数拼接到url后面。不提倡，序列化放法可采用qs.stringify()或者自己写方法

　Promise封装ajax

 1 export default function ajax(url='', data={}, type='GET') {
 2   return new Promise(function(resolve, reject) {
 3     let promise
 4     if(type === 'GET') {
 5       //准备url query 参数数据
 6       let dataStr = '' //数据拼接字符串
 7       Object.keys(data).forEach(key => {
 8         dataStr += key + '=' + data[key] + '&'
 9       })
10       if(dataStr !== '') {
11         dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
12         url = url + '?' + dataStr
13       }
14       //发送get请求
15       promise = axios.get(url)
16     }else {
17       //发送post请求
18       promise = axios.post(url, data)
19     }
20 
21     promise.then(response => {
22       resolve(response.data)
23     })
24     .catch(error => {
25       reject(error)
26     })
27   })
28 }