vue axios使用,axios的封装

一.了解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用来统一管理我们的接口。

  vue axios使用,axios的封装

  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
            }
        }
    }
}

  参考文档

  中文文档

 

vue axios使用,axios的封装

上一篇:Tomcat8 访问 manager App 失败


下一篇:vue.js 使用axios实现下载功能