vue結合axios實現restful風格的四種請求方式

Posted on by

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中，基本請求有5種：

  • get：多用來獲取數據
  • post：多用來新增數據
  • put：多用來修改數據（需要傳遞所有字段，相當於全部更新）
  • patch：多用來修改數據，是在put的基礎上新增改進的，適用於局部更新，比如我隻想修改用戶名，隻傳用戶名的字段就ok瞭，而不需要像put一樣把所有字段傳過去
  • delete：多用來刪除數據

axios其實和原生ajax，jquery中的$ajax類似，都是用於請求數據的，不過axios是基於promise的，也是vue官方比較推薦的做法。

那麼我們一起來看看具體在vue中的使用吧。

1、npm下載axios到vue項目中

這裡解釋一下為什麼要下載qs，qs的作用是用來將請求參數序列化，比如對象轉字符串，字符串轉對象，不要小看它，會在後面有大用處的。

// npm下載axios到項目中
npm install axios --save
 
// npm下載qs到項目中
npm install qs.js --save

2、main.js裡引入

記住這邊使用axios時定義的名字，我定義的是axios，所以後續請求我也必須使用axios，當然你可以定義其他的，htpp，$axios，哪怕是你的名字都沒關系，註意規范。

// 引入axios
import axios from 'axios'
// 使用axios
Vue.prototype.axios = axios;
 
// 引入qs
import qs from 'qs'
// 使用qs
Vue.prototype.qs = qs;

3、定義全局變量路徑（不是必須的，但是推薦）

（1）、方法一

可在main.js裡定義

// 右邊就是你後端的每個請求地址公共的部分
// * : 地址是我瞎編的，涉及隱私，大傢隻要把每個請求地址一樣的公共部分提出來即可
 
Vue.prototype.baseURL = "http://127.0.0.1:9000/api";

（2）、方法二

在config中的dev.env和prod.env中配置，在main.js裡使用那兩個文件的變量即可

①dev.env：本地環境

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    // 這裡是本地環境的請求地址（請忽略地址，明白原理即可）
    API_ROOT: ' "http://localhost:8080/web" '
})

②prod.env：上線環境

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    // 這裡是本地環境的請求地址（請忽略地址，明白原理即可）
    API_ROOT: ' "http://localhost:8080/web" '
})

③main.js中使用此路徑

Vue.prototype.baseURL = process.env.API_ROOT;

4、在具體需求的地方使用

舉個例子：

當我在登錄頁面點擊登錄，然後需要請求後臺數據判斷登錄是否能通驗證，以此來判斷是否能正常登錄，請求方法我寫在methods裡瞭，通過vue的@click點擊事件，當點擊登錄按鈕發起請求，然後通過vue的v-model綁定用戶名和密碼文本框的值，用來獲取用戶輸入的值以便獲取發送參數

之前我定義的變量是axios，所以這邊使用this.axios發起請求，post是請求方式，而我需要把用戶名和密碼以字符串的形式發送，所以需要qs序列化參數（qs不是必須的，具體根據你請求發送的參數和後端定義的參數格式匹配即可）

  • .then是請求成功後的回調函數，response包含著後端響應的數據，可以打印看看
  • .catch是請求失敗後的捕獲，用來校驗錯誤
login() {
 
    this.axios.post('http://bt2.xyz:8083/login/checkAdmin', qs.stringify({
          "username": this.userinfo.username,
          "password": this.userinfo.password
        }), {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    })
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    });
 
}

以上方法也可以這樣寫：

login() {
 
    this.axios({
        method:"post",
        url:"http://bt2.xyz:8083/login/checkAdmin",
        data:qs.stringify({
            "username": this.userinfo.username,
             "password": this.userinfo.password
        }),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    })
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    });
 
}

註 : get、delete請求的參數是params(特殊情況可以直接跟在地址後面)，而post、put、patch的參數是data

下面我們看看四種具體的請求方式吧 (忽略地址，涉及隱私所以就輸瞭假的地址)：

這裡的${this.baseURL}就是我們前面定義的全局路徑，隻要在後面跟上變化的地址即可

這裡的headers和qs不是必須的，因為我們業務需要傳遞這些數據，所以我才寫的，大傢隻是參考格式即可

這裡給出每種請求的兩種寫法，不盡相同，所以具體的請求還得看業務需求

put請求用的比較多，patch我自己用的很少，但是原理都是一樣的，這裡就不多說瞭

使用箭頭函數是為瞭不改變this指向，方便後期處理數據

（1）、get

this.axios({
    method: "get",
    url:`${this.baseURL}/GetAll`,
    headers: {
        Account: "Admin",
        Password:"123456"
    }
})
.then((response)=> {
    console.log(response)
})
.catch((error)=> {
    console.log(error);
});
this.axios.get('http://bt2.xyz:8083/solr/adminQuery', {
    params: {
        "page": 1,
        "rows": 5
    }
})
 .then((response)=> {
    console.log(response)
})
.catch((error)=> {
    console.log(error);
});

（2）、post

this.axios({
    method:"post",
    url:`${this.baseURL}/Create`,
    headers: {
        Account: "Admin",
        Password:"123456"
    },
    data:qs.stringify({
        Title: this.addTitle,
        Host: this.addHost,
        Port: this.addPort,
        Account: this.addAccount,
        Password: this.addPassword,
        DbName: this.addDbName
    })
})
.then( (response)=> {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
login() {
 
    this.axios.post('http://bt2.xyz:8083/login/checkAdmin', qs.stringify({
          "username": this.userinfo.username,
          "password": this.userinfo.password
        }), {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    })
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    });
 
}

（3）、put

像這個請求，我就在地址欄後面追加瞭一個參數，id，隻要後端格式允許，也可以這樣做

this.axios({
    method:"put",
    url:`${this.baseURL}/Update/`+(this.Data[index].id),
    headers: {
        Account: "Admin",
        Password:"123456"
    },
    data:qs.stringify({
        Title: inputs[0].value,
        Host: inputs[1].value,
        Port: inputs[2].value,
        Account: inputs[3].value,
        Password: inputs[4].value,
        DbName: inputs[5].value
    })
})
.then( (response)=> {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
this.axios.put('http://bt2.xyz:8083/Goods/update', {
    "goodsId": goodsId,
    "goodsName": goodsName,
    "goodsPrice": goodsPrice,
    "goodsNum": goodsNum,
    "goodsKind": 1,
    "goodsWeight": goodsWeight
})
.then((response)=> {
    console.log(response)    
})
.catch((error)=> {
    console.log(error);
});

（4）、delete

this.axios({
    method:"delete",
    url:`${this.baseURL}/Delete/`+(this.Data[index].id),
    headers: {
        Account: "Admin",
        Password:"123456"
    }
})
.then((response)=> {
    console.log(error);
})
.catch((error)=> {
    console.log(error);
});
this.axios.delete('http://bt2.xyz:8083/Goods/delete?goodsId=' + this.ProductId)
.then((response)=> {
    console.log(response)                   
})
.catch((error)=> {
    console.log(error);
});

以上就是常用的四種restful風格的請求，都是博主自己開發中請求的數據，都沒問題，但是具體的請求還要看大傢和後端數據格式的規范以及一些業務熟悉，這裡隻提供思路。如有錯誤或未考慮完全的地方，望不吝賜教。希望大傢多多支持WalkonNet。

切記跨域問題，記得讓後端處理，如果是本地的話，可以參考vue的代理

這裡附上axios的官方文檔，提供大傢參考。axios中文官方文檔

推薦閱讀：