Vue中 axios delete請求引數操作
阿新 • • 發佈:2020-08-27
vue中axios 的delete和post,put在傳值上有點區別
post和put有三個引數,url,data和config,所以在使用這兩個時,可以寫成axios.post(api,{id:1}),axios.put(api,但是delete只有兩個引數:url和config,data在config中,所以需要寫成 axios.delete(api,{data:{id:1}})
如果是服務端將引數當作Java物件來封裝接收則 引數格式為:
{data: param}
var param={id:1,name:'zhangsan'} this.$axios.delete("/ehrReferralObjPro",{data: param}).then(function(response) { }
如果服務端將引數當做url 引數 接收,則格式為:{params: param},這樣傳送的url將變為http:www.XXX.com?a=…&b=…
var param={id:1,{params: param}).then(function(response) { }
axios 陣列傳值時,我傳到後臺的是兩個字串陣列,但是將引數當成url引數接收時,如果是正常傳值,將陣列作為一個請求引數傳值時,後臺介面接收不到匹配的引數,百度之後使用JSON.stringify(),但是使用以後,後臺多了一對雙引號,最後把後臺改成物件封裝接收引數,使用的第一種。
補充知識: vue 專案中的this.$get,this.$post等$的用法
vue官網上有這麼一句話
結合案例:
// 基於axios 封裝的http請求外掛 const axios = require('axios'); /** * 以下這種方式需要呼叫Vue.use方法 呼叫的時候呼叫 this.$fetch,this.$post,this.$axios,this.$put,this.$del 方法 */ function coverFormData (data) { return Object.keys(data).map(key => { let value = data[key]; if (typeof value === 'object') { value = JSON.stringify(value); } return encodeURIComponent(key) + '=' + encodeURIComponent(value); }) } const http = { install(Vue,Option) { axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'; if (Option) { // 超時設定 axios.defaults.timeout = Option.timeout || 10000; // 預設請求地址設定 axios.defaults.baseURL = Option.baseURL || ""; // 頭部設定 if (Option.headers && typeof Option.headers === 'object') { for (let key in Option.headers) { if (!Option.headers.hasOwnProperty(key)) continue; axios.defaults.headers[key] = Option.headers[key]; } } // 請求/響應攔截器 Option.inRequest && axios.interceptors.request.use(Option.inRequest,error => { Promise.reject(error); }); Option.inResponse && axios.interceptors.response.use(Option.inResponse,error => { Promise.reject(error); }); } /** * @param {string} url * @param {object} params={} 引數可以根據需要自行處理 */ const fetch = (url,params = {},config = {}) => { const str = coverFormData(params).join('&'); return new Promise((resolve,reject) => { let address = url; if (str) { address += '?' + str; } axios.get(address,config).then(res => { resolve(res.data); }).catch(error => { reject(error); }); }); }; /** * @param {string} url * @param {object} data={} 引數可以根據需要自行處理 */ const post = (url,data = {},config = {}) => { let str = coverFormData(data).join('&'); if (config.headers && config.headers['Content-Type'] && config.headers['Content-Type'].indexOf('application/json') > -1) { str = JSON.parse(JSON.stringify(data)); } return new Promise((resolve,reject) => { axios.post(url,str,config).then(res => { resolve(res.data); }).catch(error => { reject(error); }); }); }; /** * @param {string} url * @param {object} data={} 引數可以根據需要自行處理 */ const put = (url,config = {}) => { const str = coverFormData(data).join('&'); return new Promise((resolve,reject) => { axios.put(url,config).then(res => { resolve(res.data); }).catch(error => { reject(error); }); }); }; /** * @param {string} url * @param {object} params={} */ const del = (url,config = {}) => { const str = coverFormData(config).join('&'); return new Promise((resolve,reject) => { axios.delete(url,str).then(res => { resolve(res.data); }).catch(error => { reject(error); }); }); }; const data = { axios,fetch,post,put,del }; // 這個地方說明了為啥使用的時候是this.$fetch,this.$del 這幾個方式 Object.keys(data).map(item => Object.defineProperty(Vue.prototype,'$' + item,{ value: data[item] })); } }; export default http;
然後在main.js中匯入包使用:
import http from './assets/js/http'; Vue.use(http,{ timeout: 60000,inRequest (config) { config.headers['Authorization'] = sessionStorage.getItem('TokenType') +" " + sessionStorage.getItem('AccessToken'); return config; },inResponse (response) { return response; } });
之後在子元件中就可以直接使用this.$post等了
比如:
this.$post("你的url",{ CityId: cityid,Type: 3 }) .then(res => { if (res.Success) { this.searchSecondary = res.Data; } }) .catch(error => { console.log(error); });
以上這篇Vue中 axios delete請求引數操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。