四、uni.request()接口跨域问题解决和接口的封装

uni-app官网提供的方法
uni.request({
method: 'POST',
url: 'api/url',
header:{
'Content-Type':'application/x-www-form-urlencoded'
},
data: params
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
//配置好npm run serve重启就可以了
请求跨域问题
//设置请求头会解决跨域问题
header:{
'Content-Type':'application/x-www-form-urlencoded'
}
接口的封装
在src下创建request目录 创建request.js
const baseUrl = 'http://192.168.1.123:8080'
export default {
/**
* get方法，对应get请求
* @param {String} url [请求的url地址]
* @data {Object} params [请求时携带的参数]
*/
get(url, params) {
return new Promise((resolve, reject) => {
uni.request({
method: 'GET',
url: baseUrl + url,
header:{
'Content-Type':'application/x-www-form-urlencoded'
},
data: params
}).then(res => {
// if(res.data.state == 10402){//这个是我项目权限验证

            // }else{
                resolve(res[1]); //uniapp 接口返回值下标0是个null,下标1才是我们需要接收的后台返回值
            // }
        }).catch(err => {
            reject(err);
        })
    });
},
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
post(url, params) {
    return new Promise((resolve, reject) => {
        uni.request({
            method: 'POST',
            url: baseUrl  + url,
            header:{
                'Content-Type':'application/x-www-form-urlencoded'  
            },
            data: params
        }).then(res => {                
            resolve(res[1]); //uniapp 接口返回值下标0是个null,下标1才是我们需要接收的后台返回值          
        }).catch(err => {
            reject(err);
        })
    });
}

}
在main.js中引入
import request from './request/request'
Vue.prototype.request = request
在vue文件中使用：
var url = "接口路径"；
var obj = "传给后台的参数"；
this.request.post(url, obj).then(response => {
console.log(response)
}).catch((err) => {
console.log(err)
});