vue3.0 axios請求封裝(vue2.0也適合)

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
    };