_{一.了解vue axios，vue-resource?}

　　axios与vue-resource类似于 jQuery的$ajax, 用来处理请求与响应。

　　 vue2.0之后，就不再对vue-resource更新，而是推荐使用axios，这里不过多介绍，感兴趣的可以去 https://github.com/pagekit/vue-resource

　　axios是基于Promise 用于浏览器和node.js的http客户端, axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

_{二.安装和简单使用axios}

npm install -save axios vue-axios

　　在入口文件main.js下引用，然后挂在原型下。ps: axios不是插件，所以不能通过Vue.use() 进行注册

import Vue from 'vue'
Vue.prototype.$_axios = axios
// 组件中使用
this.$_axios.get(url).then((res) => {})

　　vue-axios 是按照vue插件的方式去写的，是为了符合规范，方便协作。

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
// 组件使用
this.$http.get()
this.axios.get()

_{三.axios封装使用}

　　为什么要对axios进行封装？

　　axios 的定位是 HTTP 工具库，在设计上是作为前后端数据交互的接口层。是和业务无关的，不应该使用 this 和组件关联。应该抽象 API 层出来，在 API 层里面使用，

　　在具体页面只需要调用接口函数以及传入params即可。

　　做法.新建一个axios文件,在里面新建axios.js 和api.js。axios.js文件用来封装我们的axios，api.js用来统一管理我们的接口。

　　axios.js

import axios from 'axios'
import qs from 'qs' // 序列化post

// 创建实列， 创建不同实列处理(如果有多个请求地址，并且它们的请求和响应不同)
const instance = axios.create({
    baseURL: '/api', // 自动加在 url之前
    timeout: 1000, // 超时请求时间
    headers: {'X-Requested-With': 'XMLHttpRequest'} // 自定义请求头部
})
instance.defaults.timeout = 2000 // 优先级高于实列初始值

// requets拦截(在请求响应then,或者catch前拦截它们) 根据返回情况统一弹出信息处理
instance.interceptors.request.use((config) => {
    config.data = JSON.stringify(config.data)
    config.headers = {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
    return config
}, (error) => {
    return Promise.reject(error)
})
// response拦截
instance.interceptors.response.use((response) => {
　　　// 成功处理, example: 返回信息添加msg
    if (response.status === 200) {
        response.msg = '请求成功'
    }
    return response
}, (error) => {
    // 失败处理 example: 页面404
    if(error.response.status === 404) {
　　 console.log('页面404')
}
    return Promise.reject(error)
})

/**
 * 封装get方法
 */
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        instance.get(url, {
            params: params
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}
/**
 * 封装post请求
 */
 export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        instance.post(url, qs.stringify(data))
            .then(response => {
            resolve(response.data)
            }, err => {
            reject(err)
        })
    })
}

　　api.js 以及组件里调用

// api 层，统一管理接口调用
import {get, post} from './axios.js'

// 1.组件直接导入 import {getWork} from '@/axios/api'
// 使用 getInfo().then(() => {})
export const getInfo = function(data) {
    return get('/api/info', data)
}

// 2.挂载到vue原型上，暴露接口,main.js 引入。
// 全局使用:  this.$_axios.getInfo().then() 
export default {
    install(Vue, options) {
        Vue.prototype.$_axios = {
            getInfo: function(data) {
                return get('/info', data) // 这里的实际请求地址为 /api/info
            }
        }
    }
}

　　参考文档

　　中文文档

来源：oschina

链接：https://my.oschina.net/u/4314166/blog/3545800

标签

javascript