axios入门使用

时间：2021-11-01 06:54:06

vue项目中axios的基本使用和简单封装

axios中文文档官网　　http://www.axios-js.com/docs/

一：不封装直接使用

　　npm install axios

　　在main.js里面引用如下

1 import axios from ‘axios‘
2 Vue.prototype.$axios = axios;

 

　　在自己的组件中然后使用

 

getInfo() {
        let userInfo = {
            name: ‘javascript‘,
            pass: ‘good‘
        };
        let access_token = ‘allow_token‘;
        this.$axios({
            method: ‘post‘, // 请求方式
            url: ‘/api/user‘, // 请求url
            data: userInfo, //传参数据
            headers: {Authorization: access_token} // 携带用户信息token
        }).then(res => {
            console.log(res); // 请求成功之后返回的值，在此处进行数据展示处理
        }).catch(err => {
            console.log(err); // 请求失败返回
        })
}

 

二：简单封装之后进行使用

　　npm install axios

我们在src文件夹下面新建apis文件夹。

然后主要需要两个文件，一个是axios.js文件，配置基本选项；一个是helpers.js文件，主要进行请求封装；其他的js文件则是具体使用。如下：

   axios入门使用

　　axios.js文件如下

import axios from ‘axios‘
import ELEMENT from ‘element-ui‘;
import router from ‘../router‘;
// export const root = process.env.API_ROOT;

// 此处我们需要两个axios实例，login请求与其他页面请求稍微有点差别，
// login需要获取到一些用户数据，所以我们单独处理，其他则封装复用即可
// login完成之后，一般获取用户token，此时我们将用户token存到sessionStorage里面即可
const loginInstance = axios.create({
    baseURL: ‘‘,
    // headers: {‘Content-Type‘: ‘application/x-www-form-urlencoded‘},
    withCredentials: false
});

const instance = axios.create({
    baseURL: ‘‘,
    // headers: {‘Content-Type‘: ‘application/x-www-form-urlencoded‘},
    withCredentials: false
});
let access_token = ‘jdshfjdshfjdsf‘; // 假设这个是登录之后获取到的用户token

// 下面的配置是一层拦截，即我们在这个请求发出之前需要做点什么
// 此处是请求发出之前我们需要配置{headers: {Authorization: access_token}}
instance.interceptors.request.use(
    // 成功
    config => {
        if (access_token) {
            // config.headers.Authorization = `Bearer ${access_token}`
            config.headers.Authorization = access_token;
        }
        return config;
    },
    // 失败
    error => {
        return Promise.reject(error);
    }
);

// 在请求完成之后我们需要做点什么，简单就是将后端的response进行返回即可
instance.interceptors.response.use(
    // 请求成功
    response => {
        return response;
    },
    // 请求失败
    error => {
        if (error.response) {
            // 失败则根据其状态码进行对应提示处理
            switch (error.response.status) {
                case 401:
                    sessionStorage.removeItem(‘access_token‘);
                    sessionStorage.removeItem(‘userInfo‘);
                    router.push(‘/login‘);
                    ELEMENT.Message.error(‘身份过期，请重新登录‘);
                    break;
                case 404:
                    console.log(‘请求无效‘);
                    break;
                case 504:
                    console.log(‘请求超时‘);
                    break;
                case 500:
                    console.log(‘请求失败‘);
                    break;
                case 420:
                    console.log(‘请求失败‘);
                    break;
            }
        }
        return Promise.reject(error);
    });

// 基本封装配置完成，将这两个变量导出即可，方便其他页面使用
export {loginInstance, instance}

helpers.js文件如下（以下常用的login，get，post，del，put，其他暂时不用了解）

import axios from ‘axios‘;
import {loginInstance, instance} from ‘./axios‘;

// 定义状态码
const STATUS_OK = 200; // 请求成功
const STATUS_DEL = 204; // del请求成功
const STATUS_CREATE = 201; // 新增成功

export function login(url) {
    return function (data) {
        return loginInstance.post(url, data).then(res => {
            const { status, data } = res;
            if (status === STATUS_OK) {
                return data;
            } else {
                return Promise.reject(res);
            }
        }).catch(err => Promise.reject(err.response));
    };
}

export function get(url) {
    // url为地址  params为请求携带参数  config为可能用到的配置
    // 如在进行将table表格数据导出为excel时，我们需要传递一个config，
    // outputExcel({resCode:this.resCode}, {responseType: ‘blob‘})
    // 具体使用后面说明
    return function (params, config) {
        return instance.get(url, {
            ...config,
            params
        }).then(res => {
            const { status, data } = res;
            if (status === STATUS_OK) {
                return data;
            } else {
                return Promise.reject(res);
            }
        }).catch(err => Promise.reject(err.response.data));
    };
}

export function getJson(url) {
    return function () {
        return axios.get(url).then(res => {
            const { status, data } = res;
            if (status === STATUS_OK) {
                return data;
            } else {
                return Promise.reject(res);
            }
        }).catch(err => Promise.reject(err.response.data));
    };
}

export function getAll(...urlList) {
    return function () {
        const getList = urlList.map(url => axios.get(url));
        return axios.all(getList).then(axios.spread((...resList) => {
            return resList.map(res => res.data);
        })).catch(err => Promise.reject(err.response.data));
    };
}

export function post(url) {
    return function (data, config) {
        return instance.post(url, data, config).then(res => {
            const { status, data } = res;
            if (status === STATUS_OK || status === STATUS_CREATE) {
                return data;
            } else {
                return Promise.reject(res);
            }
        }).catch(err => Promise.reject(err.response.data));
    };
}

export function del(url) {
    return function (params, config) {
        return instance.delete(url, {
            ...config,
            params
        }).then(res => {
            const { status } = res;
            if (status === STATUS_DEL || status === STATUS_OK) {
                return;
            } else {
                return Promise.reject(res);
            }
        }).catch(err => Promise.reject(err.response));
    };
}

export function put(url) {
    return function (data, config) {
        return instance.put(url, data, config).then(res => {
            const { status, data } = res;
            if (status === STATUS_OK) {
                return data;
            } else {
                return Promise.reject(res);
            }
        }).catch(err => Promise.reject(err.response.data));
    };
}

export function getBlob(url) {
    return function (params, config) {
        return instance.get(url, {
            params,
            ...config,
            responseType: ‘blob‘
        }).then(res => {
            const { status, data } = res;
            if (status === STATUS_OK) {
                const URL = window.URL || window.webkitURL;
                return URL.createObjectURL(data);
            }
        });
    };
}

export function form(url) {
    return function (data, config) {
        return instance.post(url, data, {
            ...config,
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            }
        }).then(res => {
            const { status, data } = res;
            if (status === STATUS_OK || status === STATUS_CREATE) {
                return data;
            } else {
                return Promise.reject(res);
            }
        }).catch(err => Promise.reject(err.response.data));
    };
}

 

以上封装已经完成，那么接下来则是具体使用了，使用如下

假设此时我们需要登录，则使用封装好的login

apis文件夹下面新建login.js文件

 

login.js文件

 

// 导入封装的login
import {login} from ‘./helpers‘


// 传入url，然后将此userLogin导出，在login.vue文件中使用传如data即可
export const userLogin = login(‘/abc/d/e‘);

然后在login.vue文件中发送请求如下：

// 引入userLogin 
import { userLogin } from ‘~api/login‘


// 点击提交按钮时发送请求
methods: {
     onSubmit(param) {
          userLogin(param).then(res => 
               {
                    console.log(res)
               }).catch(err => {console.log(err)})
     }          
}

至此，祝大家使用愉快

 

 

 

 

 

 

 

 

相关文章