如何用vue封裝axios請求
其實(shí)vue封裝axios是很簡單的
首先 在src路徑下建http文件夾 并且創(chuàng)建api.js env.js request.js 這三個(gè)文件

env.js文件
這個(gè)文件主要就是封裝我們的公共地址
export default {// 開發(fā)環(huán)境dev: { baseUrl: '開發(fā)環(huán)境公共地址'},// 測試環(huán)境testtest: { baseUrl: '測試環(huán)境公共地址'},//線上接口prod: { baseUrl: '線上環(huán)境公共地址'}};
request.js 文件
這里主要就是創(chuàng)建axios 以及封裝請求攔截和相應(yīng)攔截
import axios from 'axios';import env from './env';//這里是私有域名 但是也可以不寫var vipUrl = '/app';// 創(chuàng)建axios實(shí)例const service = axios.create({//這里拿線上接口測試baseUrl: env.prod.baseUrl + vipUrl, headers:{},//請求頭 settimeout:2000,//超時(shí)時(shí)間});// 添加請求攔截器service.interceptors.request.use(config => { // 在發(fā)送請求之前做些什么 config.headers['deviceType'] = 'H5'; console.log('請求的數(shù)據(jù):', config); return config;},error => { // 對請求錯(cuò)誤做些什么 return Promise.reject('出錯(cuò)', error);});// 添加響應(yīng)攔截器service.interceptors.response.use(response => { // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么 // console.log('返回的數(shù)據(jù)', response); return response;},error => { // 對響應(yīng)錯(cuò)誤做點(diǎn)什么 return Promise.reject(error);});export default service;
api.js
這個(gè)文件中主要是需要的接口地址
//引入request.js文件import request from './request';// 輪播export function getBanners(data) {return request({ url: '/banner',//這個(gè)地址是去掉公共地址和私有域名之后剩下的地址 method: 'GET',//請求方式 支持多種方式 get post put delete 等等 data//發(fā)送請求要配置的參數(shù) 無參數(shù)的情況下也可以不寫});}
最后是在頁面中的引用
那個(gè)頁面需要請求數(shù)據(jù) 就引入相應(yīng)的方法 比如我的首頁需要引入banner
<script>//引入需要的接口import { getBanners } from '../http/api';export default {name: 'Home',components: {},mounted() { //直接使用 .then 是請求成功的回調(diào) .catch是請求失敗的回調(diào) getBanners() .then(result => {window.console.log('111', result); }) .catch(err => {window.console.log('222', err); });},methods: {}};</script>
以上就是如何用vue封裝axios請求的詳細(xì)內(nèi)容,更多關(guān)于用vue封裝axios請求的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. Docker 啟動(dòng)Redis 并設(shè)置密碼的操作2. asp文件用什么軟件編輯3. ASP新手必備的基礎(chǔ)知識(shí)4. CentOS郵箱服務(wù)器搭建系列——SMTP服務(wù)器的構(gòu)建( Postfix )5. PHP基礎(chǔ)之生成器4——比較生成器和迭代器對象6. python 實(shí)現(xiàn)有道翻譯功能7. JAVA 實(shí)現(xiàn)延遲隊(duì)列的方法8. vue限制輸入數(shù)字或者保留兩位小數(shù)實(shí)現(xiàn)9. vue+element開發(fā)一個(gè)谷歌插件的全過程10. 利用CSS制作3D動(dòng)畫

網(wǎng)公網(wǎng)安備