封装uni-app的request请求【黑马web前端】

更新时间:2019年07月26日 10时52分21秒来源:黑马程序员论坛

http.js
//封装requset，uploadFile和downloadFile请求，新增get和post请求方法
let http = {
'setBaseUrl': (url) => {
      if (url.charAt(url.length - 1) === "/") {
         url = url.substr(0, url.length - 1)
      }
      http.baseUrl = url;
},
'header': {},
'beforeRequestFilter': (config) => { return config },
'beforeResponseFilter': (res) => { return res },
'afterResponseFilter': (successResult) => { },
'get': get,
'post': post,
'request': request,
'uploadFile': uploadFile,
'downloadFile': downloadFile
}

function init(con) {
//url
let url = http.baseUrl;
if (url && con.url && !con.url.match(/^(http|https):\/\/([\w.]+\/?)\S*$/)) {
      if (con.url.charAt(0) !== "/") {
         con.url = "/" + con.url;
      }
      con.url = url.concat(con.url);
}
//header
if (http.header != undefined && http.header != null) {
      if (!con.header) {
         con.header = http.header;
      } else {
         Object.keys(http.header).forEach(function (key) {
            con.header[key] = http.header[key]
         });
      }
}
}

function request(con) {
init(con);
let config = {
      url: con.url ? con.url : http.baseUrl,
      data: con.data,
      header: con.header,
      method: con.method ? con.method : 'GET',
      dataType: con.dataType ? con.dataType : 'json',
      responseType: con.responseType ? con.responseType : 'text',
      success: con.success ? (res) => {
         http.afterResponseFilter(con.success(http.beforeResponseFilter(res)));
      } : null,
      fail: con.fail ? (res) => {
         con.fail(res);
      } : null,
      complete: con.complete ? (res) => {
         con.complete(res);
      } : null
}
return uni.request(http.beforeRequestFilter(config));
}

function get(url, con, success) {
let conf = {};
if (con && typeof con == 'function') {
      if (success && typeof success == 'object') {
         conf = success;
      }
      conf.success = con
}else{
      if (con && typeof con == 'object') {
         conf = con;
      }
      conf.success = success;
}

if (url) {
      conf.url = url
}
conf.method = "GET";
return request(conf);
}

function post(url, data, con, success) {
let conf = {};
if (con && typeof con == 'function') {
      if (success && typeof success == 'object') {
         conf = success
      }
      conf.success = con;
} else {
      if (con && typeof con == 'object') {
         conf = con;
      }
      conf.success = success;
}
if (url) {
      conf.url = url
}
if (data) {
      conf.data = data
}
conf.method = "POST";
return request(conf);
}

function uploadFile(con) {
init(con);

let config = {
      url: con.url ? con.url : http.baseUrl,
      files: con.files,
      filesType: con.filesType,
      filePath: con.filePath,
      name: con.name,
      header: con.header,
      formData: con.formData,
      success: con.success ? (res) => {
         http.afterResponseFilter(con.success(http.beforeResponseFilter(res)));
      } : null,
      fail: con.fail ? (res) => {
         con.fail(res);
      } : null,
      complete: con.complete ? (res) => {
         con.complete(res);
      } : null
}
return uni.uploadFile(http.beforeRequestFilter(config));
}

function downloadFile(con) {
init(con);

let config = {
      url: con.url ? con.url : http.baseUrl,
      header: con.header,
      success: con.success ? (res) => {
         http.afterResponseFilter(con.success(http.beforeResponseFilter(res)));
      } : null,
      fail: con.fail ? (res) => {
         con.fail(res);
      } : null,
      complete: con.complete ? (res) => {
         con.complete(res);
      } : null
}
return uni.downloadFile(http.beforeRequestFilter(config));
}

export default http
可以设置全局的url访问地址（会拼接请求的url成完整的url，所以在写url时只需要"/xxx"），也可以在请求时设置具体url（以http或https开头）

可以设置全局的header，如果请求时有header参数，会加上全局的header

可以设置拦截器，有发送请求前的拦截器beforeRequestFilter，参数是包含已经拼接完的url和header的请求参数，注意要返回；执行成功回调函数前的拦截器beforeResponseFilter，参数是回调成功函数的参数，注意要返回；执行成功回调函数后的拦截器afterResponseFilter，参数为成功回调函数的返回值。

具体例子

my.js

import http from './http'

const AUTH_TOKEN = "X-Auth-Token";

http.setBaseUrl("http://localhost:8081");
http.header['comp'] = "cjx913"
if (uni.getStorageSync(AUTH_TOKEN)) {
http.header[AUTH_TOKEN] = uni.getStorageSync(AUTH_TOKEN);
}

http.beforeResponseFilter = function (res) {
//X-Auth-Token
if (res.header) {
      var respXAuthToken = res.header[AUTH_TOKEN.toLocaleLowerCase()];
      if (respXAuthToken) {
         uni.setStorageSync(AUTH_TOKEN, respXAuthToken);
         http.header[AUTH_TOKEN] = respXAuthToken;
      }
}
return res;
}

let my = {
'http': http
}
export default my
main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = true

App.mpType = 'app'

import fly from './fly/fly'
Vue.prototype.$fly = fly

import my from './my/my'
var http = my.http;

Vue.prototype.$http = http

import store from './store'
Vue.prototype.$store = store

const app = new Vue({
  ...App
})
app.$mount()
index.js

<script>
export default {
data() {
return {
title: 'Hello',
name:'cjx913'
}
},
onLoad() {

},
methods: {
session:function(){
// this.$fly.get('/session')
// .then(function (response) {
// console.log("hello");
// console.log(response.data);
// console.log(response);
// })
// .catch(function (error) {
// console.log(error);
// });

// this.$http.request({
// url:"session",
// success:(res)=>{
// console.log(res);
// }
// })
// this.$http.get("/session",function(res){
// console.log(res);
// }
// )
this.$http.get("/session",{
success:function(res){
console.log(res);
}
}
)
}
}
}
</script>

上述是简单设置baseUrl，header和通过拦截器拦截response的X-Auth-Token，并让请求带上X-Auth-Token
---------------------

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

封装uni-app的request请求【黑马web前端】

相关阅读