Vueプロジェクトapi管理およびaxiosパッケージ要求

通常の開発では多くのネットワークリクエストが必要であり、同じページに複数のリクエストがある場合があり、インタフェースが多い場合、api管理がますます困難になり、メンテナンスが不便になります.次にaxiosに基づいてapi管理案を検討し、ctrl+vを開始します.
開始前にaxiosプロジェクトルートディレクトリコマンドライン入力をインストールする必要があります

npm install axios -S

1.srcディレクトリの下にapiディレクトリを新規作成し、パッケージインタフェースのjsファイルを格納し、中にapiを新規作成する.js ,axios.js
ディレクトリ構造は

│─src           ---- src  
│  └─api	     ---- api  
│	 └────axios.js     ---- axios.js   
│	 └────api.js       ---- api.js   

2.api/axios.jsファイルにコードを書き込む:(uni-appを例に)

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'

// hideLoading        showToast       uni ui        

//     
axios.defaults.timeout = 5 * 1000
//   cookie
// axios.defaults.withCredentials = true
//      
axios.defaults.headers.post['content-type'] = 'application/x-www-form-urlencoded'
//     
Vue.prototype.$static = ''
//       
//                   ，    
axios.defaults.baseURL = 'https://www.baidu.com'

// POST     (       )
axios.interceptors.request.use(
	config => {
     
		uni.showLoading({
     
			title: '   ...'
		});

		if (config.method === 'post') {
     
			config.data = qs.stringify(config.data)
		}
		return config
	},
	err => {
     
		uni.hideLoading();
		uni.showToast({
     
			title: '    ',
			duration: 2000,
			icon: "none"
		});
		return Promise.reject(err)
	}
)
//       (       )
axios.interceptors.response.use(
	res => {
     
		uni.hideLoading();
		return res
	},
	err => {
     
		uni.hideLoading();
		uni.showToast({
     
			title: '    ，     ',
			duration: 2000,
			icon: "none"
		});

		return Promise.reject(err)
	}
)
//     
export function post(url, params) {
     
	return new Promise((resolve, reject) => {
     
		axios
			.post(url, params)
			.then(
				res => {
     
					resolve(res.data)
				},
				err => {
     
					reject(err.data)
				}
			)
			.catch(err => {
     

			})
	})
}
export function get(url, params) {
     
	return new Promise((resolve, reject) => {
     
		axios
			.get(url, {
     
				params: params
			})
			.then(res => {
     
				resolve(res.data)
			})
			.catch(err => {
     

			})
	})
}

3.パッケージの部分を書き終わったら、apiの統一管理です、api.jsではインタフェースの統一管理、コードの書き込み:、

import {
     post,get} from './axios.js'//         post  

// params           get，post     ，post  ，    get()  post()  
// '/api/recommend/index'                 ../axios.js    axios.defaults.baseURL


//        
export const columnIndex = params => get('/api/column/index', params);
//     
export const recommendIndex = params => get('/api/recommend/index', params);
//     
export const recommendFollow = params => get('/api/recommend/follow', params);

4.このパッケージとapiの管理は一段落し、ページで先ほどのapiを呼び出すなど、ページで直接使用することができる.jsのインタフェースなら、こう書くことができます.

//      3  
import {
     recommendFollow,recommendIndex,columnIndex} from '@/api/api.js';
export default {
     
	onLoad() {
     
		 this.getData()
	},
	methods:{
     
	getData(){
     

				let parameter = {
     
					city_name:this.City
				}
				//  A
				columnIndex().then((res)=>{
     
					console.log(res);
				})
				
				//  B
				recommendIndex(parameter).then((res)=>{
     
					
						console.log(res);
					
				})

				//  C
				recommendFollow().then((res)=>{
     
					console.log(res);
				})

			}
	}
}

はい、これです.