Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。axios
在src下新建 network 文件夾
network文件夾： 網(wǎng)絡(luò)模塊 放網(wǎng)絡(luò)請(qǐng)求
index.js入口文件 core.js 參數(shù)的封裝 config.js 請(qǐng)求方法的管理

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";//創(chuàng)建一個(gè)axios實(shí)例 返回一個(gè)axios對(duì)象 const instance = axios.create({baseURL: 'https://api.it120.cc' //發(fā)送請(qǐng)求時(shí)會(huì)在url前面拼接 baseURL// timeout: 1000,//設(shè)置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}] });// 創(chuàng)建loading實(shí)例 var loading = null; // 添加請(qǐng)求攔截器 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) {// 對(duì)請(qǐng)求錯(cuò)誤做些什么Message(error);console.log("========>",error);return Promise.reject(error); });// 添加響應(yīng)攔截器 instance.interceptors.response.use(function (response) {// 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么setTimeout(() => {loading.close();}, 2000);return response; }, function (error) {// 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么Message(error);console.log("========>",error);return Promise.reject(error); });//拋出 request 方法 接收三個(gè)參數(shù) 1.請(qǐng)求方式 2.請(qǐng)求路徑 3.傳遞的參數(shù) export function request(methods, url, params) {switch (methods) {case GET:return get(url, params); //把promise對(duì)象 返回 case POST: return post(url, params)} }//get請(qǐng)求 function get(url, params) {//axios請(qǐng)求 返回的是promise對(duì)象 有返回值 后續(xù)可以直接調(diào)用then catch 等方法return instance.get(url, params) } //post請(qǐng)求 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對(duì)象 返回 } }; //拋出network export default network;

在main.js 里 全局配置 network

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

在Home.vue中使用

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。