uniapp 使用 axios

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"
						})
					}
				})