技術標籤：vue

axios封裝

下載：npm install -S axios
可以在src目錄下建立一個資料夾
在裡面寫入封裝好的js檔案
操作如下：

api.js裡面存放封裝的axios程式碼如下：

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000'
function tGet(url, params) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'get',
            url,
            params,
        })
            .then((res) => {
                resolve(res)
            })
            .catch((err) => {
                reject(err)
            })
    })
}

function tPost(url, data) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url,
            data,
        })
            .then((res) => {
                resolve(res)
            })
            .catch((err) => {
                reject(err)
            })
    })
}

function tFormPost(url, data) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url,
            data,
            transformRequest: [
                function(data) {
                    let ret = ''
                    ret = Qs.stringify(data)
                    return ret
                },
            ],
            headers: {
                'Content-Type':
                    'application/x-www-form-urlencoded;charset=utf-8',
            },
        })
            .then((res) => {
                resolve(res)
            })
            .catch((err) => {
                reject(err)
            })
    })
}

function tPut(url, params) {
    return new Promise((resolve, reject) => {
        axios
            .put(url, params)
            .then((res) => {
                resolve(res)
            })
            .catch((err) => {
                reject(err)
            })
    })
}

function tDel(url) {
    return new Promise((resolve, reject) => {
        axios
            .delete(url)
            .then((res) => {
                resolve(res)
            })
            .catch((err) => {
                reject(err)
            })
    })
}
export { tGet, tPost, tFormPost, tPut, tDel }

 

使用

在vue頁面的script標籤中引入

import { tGet, tPost, tFormPost, tPut, tDel} from ' ../ajax/api'

tGet, tPost, tFormPost, tPut, tDel 需要什麼方式引入什麼方式,例如：

import { tGet} from ' ../ajax/api' 

可以直接這麼引入一個
寫頁面的畫就不用寫 ‘http://localhost:3000’ 埠號了

tGet('/login',{
      data:data      //這裡為需要傳的引數
}).then((res)=>{
    console.log(res)    //成功為這裡的值
}).catch((err)=>{
      console.log(err)     //失敗為這裡的值
})