プロジェクトで使用VUE axiosとパッケージ

A、axiosインストール

インストール：コマンドラインでプロジェクトディレクトリにcd：

npm install axios 

Axios直接Vue.use（axios）メソッドを使用していない、特殊な使用axiosを統合するためのパッケージをインポートする必要があります。

  npm install --save axios vue-axios

main.jsを導入します：

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

Vue.use(VueAxios, axios); 

注：順序ではない変更でVue.use（VueAxios、axios）、それ以外の場合はエラー：プロパティを読み取ることができません「プロトコル」未定義の
ページJSに導入：

import axios from 'axios'

第二に、使用

1.包装API

このプロジェクトでは、私はいくつかのaxiosリクエストインターセプタとインターセプタ応答を設定する必要があり、また、管理API、私のアプローチここまで少しの和を統一する必要があります。次のようにディレクトリ構造は次のとおりです。
-src
---- API
-------- index.js
---- Axios
-------- axios.js

APIのindex.jsは、統合管理インターフェース、POSTを探し、オブジェクト・タイプが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.

ログインページ

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

ユーザー情報を要求します：

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

パッケージング後axiosのmain.jsに導入された変更する必要があります。

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

あなたが直接axiosにしたい場合は、あなたが見ることができaxios文書を

第三に、適量をインストールするには、ポスト要求、必要性を使用

プロジェクトに入力し、コマンドラインツールを使用します。

npm install qs

あなたが使用する必要がインストールコンポーネントが完了すると：

import qs from	'qs’

qs.parse（）URLの形式のオブジェクトに解析され
qs.stringify（）、URLの形式にオブジェクトのシーケンスであると＆スプライシング

https://github.com/Gesj-yean/vue-demo-collection文書の使用より優れたプラグイン。学生はどうもありがとうございましたことができ、私の一番上のブログを見て時間を持っています。