vue集成axios

axios

1、首先装第三方依赖

yarn add axios

2、 src目录下新建service文件夹
在service下新建api.js

import axios from 'axios'
// import qs from 'qs'
// import { getCache } from '@/utils';


export const baseUrlApi = 'http://192.168.145.106:8001'//---测试环境
// export const baseUrlApi = 'http://192.168.130.224:8001'//---董浩
// export const baseUrlApi = 'http://192.168.130.235:8001'//---孙若飞




// axios 配置
axios.defaults.timeout = 30000;
// axios.defaults.headers['Access-Control-Request-Headers'] = 'content-type'
axios.defaults.headers['Content-Type'] = 'application/json'
axios.interceptors.request.use((config) => {
    // let token = getCache('token');
    // if (token) {
    //     config.headers['token'] = token
    // }
    return config;
}, (error) => {
    return Promise.reject(error);
});

//返回状态判断
axios.interceptors.response.use((res) => {
    if (!res) {
        return Promise.reject(res);
    }
    return res;
}, (error) => {
    console.log("error====");
    console.log(error);
    return Promise.reject(error);
});

//get方法
export function getData(url, params) {
    let urls = baseUrlApi + url;
    return new Promise((resolve, reject) => {
        axios({
            method: 'get',
            url: urls,
            params: params,
            data: {},
        })
            .then(response => {
                // console.log(response.data);
                resolve(response.data);
            }, err => {
                reject(err);
            })
            .catch((error) => {
                reject(error)
            })
    })
}

//post方法--json请求
export function postData(url, data) {
    let urls = baseUrlApi + url;
    console.log('urls', urls)
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url: urls,
            data: data,
            headers: {
                'Content-Type': 'application/json'
                // "Content-Type": "application/x-www-form-urlencoded"
            },
        })
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err);
            })
            .catch((error) => {
                reject(error)
            })
    })
}

// //post方法--json请求
// export function postformData(url, data) {
//     let urls = baseUrlApi + url;
//     return new Promise((resolve, reject) => {
//         axios({
//             method: 'post',
//             url: urls,
//             data: data,
//             headers: {
//                 'Content-Type': 'application/json'
//             },
//         })
//             .then(response => {
//                 resolve(response.data);
//             }, err => {
//                 reject(err);
//             })
//             .catch((error) => {
//                 reject(error)
//             })
//     })
// }

3、在service下新建各个模块的api文件

import { getData, postData } from './api'

export default {

    getUnloadArea(data) {
        return getData( `/api/tms/app/tms/arrival/tmsArrivalMgmt/getUnloadArea/${data.warehouseId}/${data.plate}`);
    },

    // getPrivacyPolicyUserAgreement() {
    //     return getData(  `api/frame/fwServiceAgreement/getPrivacyPolicyUserAgreement`);
    // },

}

4、在页面中就可以使用