axios怎么在vue項目中使用，針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供岢嵐企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為岢嵐眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進行中。

import axios from 'axios';
import { Toast} from 'mint-ui';// 我用的mint的框架來彈出我的錯誤返回 大家可以用別的提示
import router from '../router'

// 默認(rèn)超時設(shè)置
axios.defaults.timeout = 50000;

// 相對路徑設(shè)置
axios.defaults.baseURL ='';

//http request 攔截器
axios.interceptors.request.use(
 config => {
  // 獲取token
  const token = localStorage.getItem('cc_token');
  // 設(shè)置參數(shù)格式
  if(!config.headers['Content-Type']){
   config.headers = {
    'Content-Type':'application/json',
   };
  }
  // 添加token到headers
  if(token){
   config.headers.token = token
  }
  // 鑒權(quán)參數(shù)設(shè)置
  if(config.method === 'get'){
    //get請求下 參數(shù)在params中，其他請求在data中
   config.params = config.params || {};
   let json = JSON.parse(JSON.stringify(config.params));
   //一些參數(shù)處理
  }else{
   config.data = config.data || {};
   //一些參數(shù)處理
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 }
);

以上請求之前的一些處理就完成了
下面是獲得返回的一些處理

//http response 攔截器
axios.interceptors.response.use(
 response => {
  //一些統(tǒng)一code的返回處理
  if(response.data.code === 501){
   // 登錄驗證
   //做了個示例跳轉(zhuǎn)項目中登錄，并記錄下相對路徑
   router.push({
    name:'login',//從哪個頁面跳轉(zhuǎn)
    query:{
     retUrl:window.location.href.split('#')[1] || '',
     is_new_user_url:1
    }
   })
  }
  return response;
 },
 error => {
  return Promise.reject(error)
 }
);

接著把所有請求類型都做下簡單封裝

/**
 * 封裝get方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url,params={}){
 return new Promise((resolve,reject) => {
  axios.get(url,{
   params:params
  })
   .then(response => {
    if(response.data.code === 200){
    //返回成功處理 這里傳的啥 后續(xù)調(diào)用的時候 res就是啥
     resolve(response.data.data);//我們后臺所有數(shù)據(jù)都是放在返回的data里所以這里統(tǒng)一處理了
    }else{
    //錯誤處理
     Toast(response.data.msg)
    }
   })
   .catch(err => {
    reject(err);
    let message = '請求失敗！請檢查網(wǎng)絡(luò)';
    //錯誤返回
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

/**
 * 封裝post請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.post(url,data)
   .then(response => {
    if(response.data.code === 200){
     resolve(response.data.data);
    }else{
     Toast(response.data.msg)
    }
   },err => {
    reject(err);
    let message = '請求失敗！請檢查網(wǎng)絡(luò)';
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

/**
 * 封裝patch請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.patch(url,data)
   .then(response => {
    if(response.data.code === 200){
     resolve(response.data.data);
    }else{
     Toast(response.data.msg)
    }
   },err => {
    reject(err);
    let message = '請求失敗！請檢查網(wǎng)絡(luò)';
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

/**
 * 封裝put請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.put(url,data)
   .then(response => {
    if(response.data.code === 200){
     resolve(response.data.data);
    }else{
     Toast(response.data.msg)
    }
   },err => {
    reject(err);
    let message = '請求失敗！請檢查網(wǎng)絡(luò)';
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

export function del(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.delete(url,data)
   .then(response => {
    if(response.data.code === 200){
     resolve(response.data.data);
    }else{
     Toast(response.data.msg)
    }
   },err => {
    reject(err);
    let message = '請求失敗！請檢查網(wǎng)絡(luò)';
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

好了 主要的文件編輯好 然后在service中新建api.js文件并引入對應(yīng)組件方法

import Vue from 'vue';
import {post,fetch,patch,put,del,upload,ret2} from './index'
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;
Vue.prototype.$del=del;

接著就可以開始寫各個API方法了

//也可以不需要
const _baseUrl=process.env.API_URL;//這里我在項目配置文件里面設(shè)置了相對路徑
//登錄方法
const loginURL = `${_baseUrl}api/admin/login`;
export const loginApi = function(json) {
 return Vue.prototype.$post(loginURL,{"username":json.username,"passwd":json.password})
};
//修改賬號信息RESTful
const editAdminUrl = `${_baseUrl}api/admin/user/info`;
export const editAdminListApi = function (id,json) {
 return Vue.prototype.$put(`${editAdminUrl}/${id}`,json)
};
//等等...

最后是使用，非常簡單方便，在vue文件中引入并使用

import { loginApi ,editAdminListApi } from "../../service/api";
  export default {
    methods：{
      //登錄
      login(){
        let json = {
          userName:'xx',
          password:'xx'
        }
        loginApi().then(res=>{
          console.log(res)
        })
      },
      // RESTful 修改信息
      editAdminList(){
        let id = 1;
        let json = {name:11};
        editAdminListApi(id,json).then(res=>{
          console.log(res)
        })
      }
    }
  }

關(guān)于axios怎么在vue項目中使用問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

網(wǎng)頁標(biāo)題：axios怎么在vue項目中使用
文章網(wǎng)址：http://chinadenli.net/article22/jigjjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、搜索引擎優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站制作、域名注冊、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)