axios vue y el paquete utilizados en el proyecto

Una, la instalación axios

Instalación: cd al directorio del proyecto en la línea de comandos:

npm install axios 

Axios no utiliza directamente método Vue.use (axios), es necesario importar un paquete de integrar axios uso especializado:

  npm install --save axios vue-axios

main.js introdujeron:

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

Vue.use(VueAxios, axios); 

Nota: Vue.use (VueAxios, Axios) a fin de no cambio, de lo contrario un error: No se puede leer la propiedad 'protocolo' undefined
introducido en Js página:

import axios from 'axios'

En segundo lugar, el uso

api 1. Embalaje

En un proyecto que necesito para configurar algunos interceptores de solicitud y respuesta axios interceptor, y también tiene que ser unificados API de administración, aquí una pequeña suma mi enfoque. estructura de directorios es la siguiente:
-src
---- API
-------- index.js
---- Axios
-------- axios.js

index.js Api buscan interfaces de gestión unificada, publicar y obtener métodos de ejemplo, cuando el tipo de objeto es reqData:

import Ax from '../axios/axios'
import qs from 'qs'

/* 登陆 */
export function login(reqData) { return Ax.post('/api/login', qs.stringify(reqData)) }
/* 用户列表 */
export function getUserList(reqData) { return Ax.get('/api/users', { params: reqData }) }

2. uso

página de login

import { login } from '../service/api/index'

const params = { username: this.loginForm.name, password: this.loginForm.password }
login(params).then(res => {
	if (res.data.result_code === 'FAIL') {
        this.$alert('账号密码错误', {
            confirmButtonText: '确定'
    	})
		 return false
    } else {
		localStorage.setItem('token', 'Bearer ' + res.data.data.token)
        this.$router.push('/home')
    }
 })

Solicitar información del usuario:

import { getUserList } from '@/service/api/index'

const params = { 'page': this.page, 'limit': this.limit }
if (this.form.telephone !== '') {
	params.telephone = this.form.telephone
}
getUserList(params).then(res => {
	this.tableData = res.data.data.data
	this.total = res.data.data.total
	this.loading = false
})

3. Configuración axios

import axios from 'axios'
import router from '../../router'
axios.defaults.baseURL = '路径'
axios.defaults.withCredentials = false
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')

/* 请求拦截 */
axios.interceptors.request.use(
    config => {
        if (localStorage.getItem('token')) {
            config.headers.Authorization = localStorage.getItem('token')
        }
        return config
    },
    err => {
        return Promise.reject(err)// 请求错误时，直接结束
    })

/* 响应拦截 */
axios.interceptors.response.use(
    response => {
        return response
    },
    err => {
        if (err.response) {
            switch (err.response.status) {
                    case 401:
                        localStorage.removeItem('token')
                        router.replace('/login')
                        break
            }
        }
        // return Promise.reject(err.response.data) // 请求错误时，直接结束
    })

export default axios

La necesidad de un cambio introducido en Axios main.js después del envasado:

import axios from './service/axios/axios'

Si desea directamente axios, se puede ver Axios documentos

En tercer lugar, cuando se utiliza la solicitud posterior, es necesario instalar cs

Utilice la herramienta de línea de comandos, escriba en el proyecto:

npm install qs

Una vez concluidos los componentes de la instalación que necesita para su uso en:

import qs from	'qs’

qs.parse () se analizan en objetos de la forma URL
qs.stringify () es una secuencia de objetos en la forma de un URL, a y empalme

https://github.com/Gesj-yean/vue-demo-collection uso documentado más destacados plug-ins. Los estudiantes tienen tiempo para mirar mi blog cima se puede muchas gracias.