vue封装axios(api)

目录

 第一步安装：npm install save axios安装

第二步：vue项目中创建一个api.js文件

第三步：引入到man.js

第四步：直接在页面中使用即可

总结：封装好的更方便

---

第一步安装：

npm install save axios安装

第二步：vue项目中src下创建一个api.js文件

api.js代码如下：

import axios from 'axios';
import { Message } from 'element-ui';
axios.defaults.timeout = 30000;


// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    //可以写if判断，提前拦截错误信息
    if(response.data.code==0){

        return response;
    }else{
       Message.error(response.data.msg);
    }


}, function (err) {

    return Promise.reject(err);
});


export function apiGet(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params,
            herader: { "token": sessionStorage.getItem('token') }
        }).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err.data)
        })
    });
}


export function apiPost(url, params) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url: url,
            data: params,
            headers: {strheader:"888"}

           
        }).then(res => {
            resolve(res.data);
        }).catch(err => { reject(err.data) })
    });
}

第三步：引入到man.js 

import { apiGet, apiPost } from './api/api';

Vue.prototype.$apiGet = apiGet

Vue.prototype.$apiPost = apiPost

第四步：直接this$调用即可

//如果是post请求就是this.$apiPost
charsshow() { 
            this.$apiGet('http://47.94.4.201/index.php/index/index/getDatas').then(res => {  
                console.log(res);
                this.arr = res.data.arr
            })

        }

总结：

• 我们可以直接在api文件夹下新建一个api.js文件来处理这些，然后混入，就不需要每个页面都引入这些js文件，而是直接this$来调接口