Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。axios
在src下新建 network 文件夾
network文件夾： 網絡模塊 放網絡請求
index.js入口文件 core.js 參數的封裝 config.js 請求方法的管理

config.js

export const GET="get"; export const POST="post"; export const path ={list:'/small4/shop/goods/list' };

core.js

import axios from 'axios'; import {GET, POST, path} from './config'; import {Loading,Message} from "element-ui";//創建一個axios實例 返回一個axios對象 const instance = axios.create({baseURL: 'https://api.it120.cc' //發送請求時會在url前面拼接 baseURL// timeout: 1000,//設置axios為form-dataheaders:{'Content-Type':'application/x-www-form-urlencoded'},transformRequest:[function (data) {let ret = '';for (let it in data) {ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'}return ret}] });// 創建loading實例 var loading = null; // 添加請求攔截器 instance.interceptors.request.use(function (config) {loading = Loading.service({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});return config; }, function (error) {// 對請求錯誤做些什么Message(error);console.log("========>",error);return Promise.reject(error); });// 添加響應攔截器 instance.interceptors.response.use(function (response) {// 對響應數據做點什么setTimeout(() => {loading.close();}, 2000);return response; }, function (error) {// 對響應錯誤做點什么Message(error);console.log("========>",error);return Promise.reject(error); });//拋出 request 方法 接收三個參數 1.請求方式 2.請求路徑 3.傳遞的參數 export function request(methods, url, params) {switch (methods) {case GET:return get(url, params); //把promise對象 返回 case POST: return post(url, params)} }//get請求 function get(url, params) {//axios請求 返回的是promise對象 有返回值 后續可以直接調用then catch 等方法return instance.get(url, params) } //post請求 function post(url, params) {return instance.post(url, params) }

index.js

import {GET, POST, path} from './config'; import {request} from './core'; //引入core模塊中拋出的request方法const network = {getGoodsList(params) {// request(methods, url, params)return request(GET, path.list, params); //把promise對象 返回 } }; //拋出network export default network;

在main.js 里 全局配置 network

import network from './network/index' Vue.prototype.$network=network;

在Home.vue中使用

mounted() {//network里有 getGoodsList 方法 并需要接收參數this.$network.getGoodsList({page: 1,pageSize: 50}).then(res => {console.log(res);}).catch(Err => {console.log(err);})}

總結

以上是生活随笔為你收集整理的vue中axios的封装以及使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。