vue2 0 結合elementui封裝的乙個請求

2021-09-28 16:42:38 字數 2659 閱讀 5535

confing/dev.env.js

'use strict'

const merge = require('webpack-merge')

const prodenv = require('./prod.env')

module.exports = merge(prodenv, )

axios/axios-config.js

import store from '../../store'

export default ],

// 是否跨域請求

// withcredentials: true,

// 請求頭資訊

headers: ,

// 設定超時時間

timeout: 30000,

// 返回資料型別

responsetype: 'json'

}}}

axios/axios-service.js

import axios from 'axios'

import qs from 'qs'

import config from './axios-config'

import store from '../../store'

console.log(config);

import from 'element-ui'

const loadingoption = ;

let loadobj;

axios.interceptors.request.use(function (config)

return config

}, function (err) )

// 新增響應***

axios.interceptors.response.use(function (response)

const data = response.data

if (data.code === '401' || data.code === '1001') )}})

} else

}, function (err)

if (err && err.response) )

err.message = '未授權,請登入'

break

case 403:

err.message = '拒絕訪問'

break

case 404:

err.message = '請求位址出錯'

break

case 408:

err.message = '請求超時'

break

case 500:

err.message = '伺服器內部錯誤'

break

case 501:

err.message = '服務未實現'

break

case 502:

err.message = '閘道器錯誤'

break

case 503:

err.message = '服務不可用'

break

case 504:

err.message = '閘道器超時'

break

case 505:

err.message = 'http版本不受支援'

break

default:

}} return promise.reject(err)

})export default )

})},

delete: function (url, data, callback) )

})},

put: function (url, data, callback) )

})},

patch: function (url, data, callback) )

})},

get: function (url, data, callback) )

})},

list: function (url, data, callback) )

})},

attach: function (url, string, data, callback) )

})}}

api/orders.js檔案根據自己需要建立

import service from './axios/axios-service'

const module = 'admin'

const api_todo_router = module + '/api/' + process.env.api_version

const getbyid = function (data, callback)

const getbyno = function (data, callback)

const orders =

export default orders

頁面使用

import ordersapi from "@/api/orders";

methods: , response => else

});},

}

vue2 0學習記錄

1 在main.js可註冊全域性元件,vue.components 元件名稱 元件名 import 元件名 from components 元件檔案 3 元件的標籤名不可與系統的html標籤重複 4 父元件向子元件傳值 父元件有乙個陣列 users 在父元件模板中的子元件標籤中接收 users us...

Vue2 0使用小結

近期第一次使用vue快速開發了一款前端專案,開發效率與便捷性大幅提公升,體驗了一把vue的藝術之道,在此總結下目前所接觸到的vue基礎使用知識,後續會補充遇到的知識點和問題以及解決方案.簡介 vue 是典型mvvm框架,擁有雙向繫結的能力與完整的元件化方案,利用 virtual dom 提供了函式式...

Vue2 0學習之路

一 基礎 1.vue2.0學習記錄 hello world 2.vue2.0學習記錄 todo list初步 3.vue2.0學習記錄 mvvm模式 4.vue2.0學習記錄 全域性元件 5.vue2.0學習記錄 區域性元件 6.vue2.0學習記錄 父子元件傳值 7.vue2.0學習記錄 生命週期...