Vue 之 Axios AJAX封装
in VUE with 0 comment, Views is 111

Vue 之 Axios AJAX封装

in VUE with 0 comment, Views is 111

前言

才不要写前言,Axios 中文文档 https://www.kancloud.cn/yunye/axios/234845

安装Axios

文档里都有,我不细讲了,进入项目

$ npm install --save-dev axios
# 或者
$ cnpm install --save-dev axios

目录结构

1.png

详细代码

1. index.js (Axios的配置文件)

import axios from 'axios';      // 引入axios
import qs from 'qs';            // 引入qs
import APIUrl from './api.url'; // 引入api.url.js

// axios 默认配置  更多配置查看Axios中文文档
axios.defaults.timeout       = 5000;             // 超时默认值
axios.defaults.baseURL       = APIUrl.baseURL;   // 默认baseURL
// axios.defaults.responseType  = 'json'         // 默认数据响应类型
axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
axios.defaults.withCredentials = true;           // 表示跨域请求时是否需要使用凭证

// http request 拦截器
// 在ajax发送之前拦截 比如对所有请求统一添加header token
axios.interceptors.request.use(
    config => {
        if (token) {
            config.headers.Authorization = `token ${token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);

// http response 拦截器
// ajax请求回调之前拦截 对请求返回的信息做统一处理 比如error为401无权限则跳转到登陆界面
axios.interceptors.response.use(
    response => {
        switch (response.data.error) {
        case 401:
            response.data.msg = '未授权,请登录';
            break;
        default:
            break;
        }
        return response;
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
);

export default axios;  // 这句千万不能漏下!!!

/**
 * post 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post (url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, qs.stringify(data))
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err);
            });
    });
}
/**
 * get 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get (url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params: data})
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err);
            });
    });
}

/**
 * 其他delete等的封装类似
 * 可以查看中文文档 自行封装
 */

其他页面调用

import {post, get} from '@/axios/index';

// 就可以使用 post 和 get 了
// 其他的类似

2. api.url.js

API的路由地址,统一写在一个文件里,其他页面调用,方便后期更改url。毕竟当页面多的时候,api url换了总不可能每个页面都去改过吧。
其实这个文件里的内容非常简单

export default {
    DOMAIN               : 'http://www.baidu.com',
    baseURL              : 'http://www.baidu.com/api/v1',
    /* Util API */
    util: {
        image            : '/util/image.html',          // 图片上传
    },
};

其他页面要调用

import APIUrl from '@/axios/api.url';

var img_url = APIUrl.util.image; // 这个就是图片上传的api url

最后

还有最重要的一步
当然就是找到 main.js 这个入口文件
在里面 import 一下 axios 的 index 文件

import App from './App';
import router from './router/index';
import axios from './axios/index'; // 这里这里

Vue.config.productionTip = false;

new Vue({
    el: '#app',
    router,
    axios, // 还有 这里这里
    render: h => h(App)
});

Axios 封装完成!!!

Responses
选择表情