1.引入axios
1 | npm install axios |
2.src下面建立http資料夾(下圖)
api.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | import axios from 'axios' var $http = axios.create({<!-- --> baseURL: 'https://wwww.baidu.com'//伺服器地址 }); // 新增請求攔截器 $http.interceptors.request.use(function (config) {<!-- --> // 在發送請求之前做些什麼 config.headers['Authorization'] = 'Bear ' + '123456'//按需求寫入token return config; }, function (error) {<!-- --> // 對請求錯誤做些什麼 return Promise.reject(error); }); // 新增回應攔截器 $http.interceptors.response.use(function (response) {<!-- --> // 對回應資料做點什麼 let data = response.data return data; }, function (error) {<!-- --> // 對回應錯誤做點什麼 return Promise.reject(error); }); export default $http |
index.js
1 2 3 4 5 6 7 8 9 10 11 | import axios from './api' let api = {<!-- -->} // 登入 api.login = function (data) {<!-- --> return axios({<!-- --> url: '/login', method: 'POST', data: data }) } export default api |
頁面引用
1 | import api from '@/http/index.js'; |
setup中呼叫
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | let login = () => {<!-- --> let data = {<!-- --> username: '小三', password: '123456789' }; api.login(data).then((res) => {<!-- --> if (res.error_code === 'Success') {<!-- --> console.log(res.data); } }); }; return {<!-- --> login }; |