uni-app封装api

第一步新建js

uni-app->common->新建js->新建http->新建index.js

目录图

第二步:配置

```

export default {

config: {

baseUrl: "",

headers: {},

dataType: "json",

responseType: "text"

},

interceptor: {

request: null,

response: null

},

request(options) {

return new Promise((resolve, reject) => {

let _config = null

options.url = this.config.baseUrl + options.url

options.complete = (response) => {

let statusCode = response.statusCode

response.config = _config

if (process.env.NODE_ENV === 'development') {

if (statusCode === 200) {

// console.log("【" + _config.requestId + "】 结果:" + JSON.stringify(response.data))

}

}

if (this.interceptor.response) {

let newResponse = this.interceptor.response(response)

if (newResponse) {

response = newResponse

}

}

if (statusCode === 200) { //成功

resolve(response);

} else {

reject(response)

}

}

_config = Object.assign({}, this.config, options)

_config.requestId = new Date().getTime()

if (this.interceptor.request) {

this.interceptor.request(_config)

}

if (process.env.NODE_ENV === 'development') {

// console.log("【" + _config.requestId + "】 地址:" + _config.url)

if (_config.data) {

// console.log("【" + _config.requestId + "】 参数:" + JSON.stringify(_config.data))

}

}

uni.request(_config);

});

},

get(url, data, options) {

if (!options) {

options = {}

}

options.url = url

options.data = data

options.method = 'GET'

return this.request(options)

},

post(url, data, options) {

if (!options) {

options = {}

}

options.url = url

options.data = data

options.method = 'POST'

return this.request(options)

},

put(url, data, options) {

if (!options) {

options = {}

}

options.url = url

options.data = data

options.method = 'PUT'

return this.request(options)

},

delete(url, data, options) {

if (!options) {

options = {}

}

options.url = url

options.data = data

options.method = 'DELETE'

return this.request(options)

}

}

```

配置main.js

```

import http from '@/common/js/http/'

Vue.prototype.$http = http

//设置baseUrl 本地

http.config.baseUrl = "http://ydy.zgjsprd.com"

Vue.prototype.$url = "http://192.168.168.78:89" //图片视频后台返回路径拼接上这个域名

//公司服务器

// http.config.baseUrl = "http://47.99.91.90:89" 

// Vue.prototype.$url = "http://47.99.91.90:89"    //图片视频后台返回路径拼接上这个域名

http.config.timeout = 30000;

// 清除定时器工具函数

const clearTimeoutByUrl = (url, requestList) => {

for (let item in requestList) {

if (url === requestList[item]['url']) {

clearTimeout(requestList[item]['timeId']);

}

}

}

let service = {};

service._requestCount = 0; // 累加请求次数

service._requestTimeIdList = [];

//设置请求前拦截器

http.interceptor.request = config => {

//添加通用参数

config.header = {

"token": uni.getStorageSync('userInfo').token,

'Content-type': 'application/x-www-form-urlencoded'

}

service._requestCount++;

// 如果接口请求小于200ms的话 那么就不显示loading

const timeId = setTimeout(() => {

uni.showLoading({

title: '加载中',

mask: true

});

}, 1000);

service._requestTimeIdList.push({

timeId: timeId,

url: config.url

});

// console.log(config.header,'config');

return config

}

//设置请求结束后拦截器

http.interceptor.response = (response) => {

//判断返回状态 执行相应操作

// uni.hideLoading();

uni.stopPullDownRefresh();

service._requestCount--;

// clear 200ms 后准备展示的loading

clearTimeoutByUrl(response.config.url, service._requestTimeIdList);

if (service._requestCount <= 0) {

uni.hideLoading();

// store.commit('setIsLoad', false);

// console.log(2);

}

// console.log(response,'response');

// ====================================================

return response;

}

```

页面方法配置

```

methods: {

login(e) {

// 获取用户信息

this.$http.get('/user/login').then(res => {

if (res.data.code == 200) {

this.username = res.data.username

}

else {

uni.showToast({

icon: 'none',

title: res.data.msg

})

}

})

}

```


源码提取,菜鸟自己整理,仅供自己参考
链接:https://pan.baidu.com/s/1c0gtDh8RSAZlMgny8utFzw

提取码:p50m

复制这段内容后打开百度网盘手机App,操作更方便哦

推荐阅读更多精彩内容