vue2配置axios介面檔案

2021-09-17 07:25:23 字數 1973 閱讀 5850

專案正常跑起來後,現在就開始與後台聯調介面的配置問題,也就是資料傳輸需要的介面配置。vue本身是不支援ajax介面請求的,所以我們需要安裝乙個介面請求npm包。開始新手上手建議使用superagent這個工具,具體介紹請看文件,以前的vue專案通常是用vue-resource,但是vue-resource文件不再跟新,也就是說vue-resource api的封裝方法已經不再對新的框架支援,所以不建議再使用,目前比較流行的axios這個工具,本身axios已經做好了優化和封裝,但是對應不同的專案,還是需要做一些修改,以便相容不同專案需求,以下是大部分專案需要的封裝格式

首先安裝axios工具,執行命令:npm install axios 或者使用**映象 cnpm install axios

在已經搭好的專案檔案中新建乙個api檔案,最好是放在src資料夾或者config資料夾下,配置內容如下

// 配置api介面位址

var root = process.env.api_root;

// 在root(根目錄路徑中後面的等號是你在dev.env.js和prod.env.js檔案中所連線的後台介面,

如api_root: '""',)

// 引用axios

import axios from 'axios';

var axios = require('axios')

// 自定義判斷元素型別js

function totype (obj) ).tostring.call(obj).match(/\s([a-za-z]+)/)[1].tolowercase()

}// 引數過濾函式

function filternull (o)

if (totype(o[key]) === 'string') else if (totype(o[key]) === 'object') else if (totype(o[key]) === 'array')

} return o}/*

介面處理函式

這個函式每個專案都是不一樣的,我現在調整的是適用於

https://* 的介面,如果是其他介面

主要是,不同的介面的成功標識和失敗提示是不一致的。

另外,不同的專案的處理方法也是不一致的,這裡出錯就是簡單的alert

*/function apiaxios (method, url, params, success, failure)

axios()

.then(function (res)

} else else }})

.catch(function (err)

})}// 返回在vue模板中的呼叫介面

export default ,

post: function (url, params, success, failure) ,

put: function (url, params, success, failure) ,

delete: function (url, params, success, failure)

}api檔案配置好以後,在main.js檔案引入api.js檔案,在配置好的原始檔案中新增

// 引用api檔案

import api from './api/index.js'

// 將api方法繫結到全域性

vue.prototype.$api = api

形如:import vue from 'vue'

import router from './router'

// 引用api檔案

import api from './api/index.js'

// 將api方法繫結到全域性

vue.prototype.$api = api

vue.config.productiontip = false

/* eslint-disable no-new */

new vue()

over,thanks

Vue2 配置跨域

vue.config.js 配置說明 官方vue.config.js 參考文件 這裡只列一部分,具體配置參考文件 module.exports 問你是否使用eslint lintons e true 如果你想要在生產構建時禁用 eslint loader,你可以用如下配置 lintons e pro...

vue2專案使用axios傳送請求

前言 在vue1.0的時候有乙個官方推薦的 ajax 外掛程式 vue resource,但是自從 vue 更新到 2.0 之後,官方就不再更新 vue resource。目前主流的 vue 專案,都選擇 axios 來完成 ajax 請求,下面來具體介紹一下axios的使用。專案中安裝axios ...

vue2新人入門

預設對webpack,sass,npm有一定的了解。一些vue指令不會說,反正官方文件有,我也懶得抄。一 超級基礎部分 1.全域性安裝 npm install globall vue cli 已全域性安裝了的不必安裝 2.建立乙個基於webpack的模板專案 vue init webpack 你的專...