uniapp 使用 axios
1.先用npm install axios这就不用说了吧2.添加配置代码App.vue<style lang="scss">@import 'uview-ui/theme.scss';</style>main.js// 引入封装后的axiosimport axios from './utils/http.js'/*** 给Vue函数添加一个原型属性$axios 指向Axio
·
1.先用npm install axios
这就不用说了吧
2.添加配置代码
App.vue
<style lang="scss">
@import 'uview-ui/theme.scss';
</style>
main.js
// 引入封装后的axios
import axios from './utils/http.js'
/**
* 给Vue函数添加一个原型属性$axios 指向Axios
* 这样做的好处是在vue实例或组件中不用再去重复引用Axios 直接用this.$axios就能执行axios 方法了
* 在.vue中使用,this.$axios.get
* @param {Object} config
*/
Vue.prototype.$axios = axios
下面是解决app和小程序适配的问题
axios.defaults.adapter = function(config) {
return new Promise((resolve, reject) => {
console.log(config)
var settle = require('axios/lib/core/settle');
var buildURL = require('axios/lib/helpers/buildURL');
uni.request({
method: config.method.toUpperCase(),
url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
header: config.headers,
data: config.data,
dataType: config.dataType,
responseType: config.responseType,
sslVerify: config.sslVerify,
complete: function complete(response) {
response = {
data: response.data,
status: response.statusCode,
errMsg: response.errMsg,
header: response.header,
config: config
};
settle(resolve, reject, response);
}
})
})
}
uni.css
在第一行添加
@import "uview-ui/theme.scss";
@import "uview-ui/index.scss";
加入http工具包
http.js
import Vue from 'vue'
import axios from 'axios'
// create an axios instance
const service = axios.create({
// baseURL: 'http://127.0.0.1:8686', // url = base url + request url
//withCredentials: true, // send cookies when cross-domain requests 注意:withCredentials和后端配置的cross跨域不可同时使用
timeout: 6000, // request timeout
crossDomain: true
})
// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
config => {
// if (store.state.token) {
// // 给请求头添加user-token
// config.headers["user-token"] = store.state.token;
// }
console.log('请求拦截成功')
return config;
},
error => {
console.log(error); // for debug
return Promise.reject(error);
}
);
//配置成功后的拦截器
service.interceptors.response.use(res => {
if (res.data.status== 200) {
return res.data
} else {
return Promise.reject(res.data.msg);
}
}, error => {
if (error.response.status) {
switch (error.response.status) {
case 401:
break;
default:
break;
}
}
return Promise.reject(error)
})
export default service
3.配置api
建一个api的包,里面存放所有用到的接口
例子
import service from '../../utils/http.js'
export function toLogin(data) {
return service({
url: '/login',
method: 'post',
params : data
})
}
调用
const toLogin = require('../../api/login/login.js')
//写一个方法,里面添加接口的调用
toLogin.toLogin(data).then(res => {
if (res.data.code === 200) {
uni.switchTab({
url: "../index/index"
})
}
})
更多推荐
已为社区贡献3条内容
所有评论(0)