1.下載axios

npm i @nuxtjs/axios -s

2. 在nuxt.config.js中配置axios

modules: [
      '@nuxtjs/axios',
  ],

此時母赵， 就可以在組件中使用啦

async asyncData({$axios}) {
  let { res } = await $axios.get(`https://xxx.com/api/xxx`) 
  console.log(res)    
 }

3. 配置axios的baseUrl, 攔截器

3.1 在~/plugins 創(chuàng)建 axios.js文件

配置：

export default function ({store, redirect, req, router, app: { $axios }})  {
    // 數(shù)據(jù)訪問前綴
    $axios.defaults.baseURL = 'http://XXX/api';
    if(process.server){
        // 獲取服務端的token
        var token = getCookie.getcookiesInServer(req).token;
    }
    if(process.client){
        // 獲取客戶端token
        var token = getCookie.getcookiesInClient('token');
    }
    // request攔截器
    $axios.onRequest(config => {
        if(process.client){
            // 客戶端下，請求進度條開始
            NProgress.start();
        }
        // 將獲取到token加入到請求頭中
        config.headers.common['Authorization'] = token;
    });
    // response攔截器，數(shù)據(jù)返回后襟衰，可以先在這里進行一個簡單的判斷
    $axios.interceptors.response.use(
        response => {
            if(process.client){
                // 客戶端下， 請求進度條結(jié)束
                NProgress.done();
            }
            // return response
            if(response.data.code == 401){
                // 返回401邦投，token驗證失敗次酌，清除客戶端cookie
                Cookie.remove("token");
                  // 重定向到登錄頁面， 這里做一個判斷惰说，容錯：req.url 未定義
                if(req.url){
                    redirect("/sign?ref="+req.url)
                }else{
                    redirect("/sign")
                }
            }else if(response.data.code == 404){
                // 重定向到404頁面
                redirect("/")
            }
            else{
                // 請求接口數(shù)據(jù)正常磨德，返回數(shù)據(jù)
                return response
            }
        },
        error => {
            if(process.client){
                NProgress.done();
            }
            if(error.response.status == 500){
                // http狀態(tài)500，服務器內(nèi)部錯誤吆视，重定向到500頁面
                redirect("/500.htm")
            }
            if(error.response.status == 404){
                // http狀態(tài)500典挑，請求API找不到，重定向到404頁面
                redirect("/404.html")
            }
            return Promise.reject(error.response)   // 返回接口返回的錯誤信息
        })
}

3.2 將axios.js添加到nuxt.config.js中啦吧，全局使用上面配置

  plugins: [
      '~/plugins/axios',
  ],

就可以在項目中使用啦

注意：nuxt.js中異步獲取函數(shù)沒有this,屬性您觉，具體看下方代碼

// params: 頁面路由相關信息
// $axios: 引入axios
// context：...  詳見官方文檔 
https://zh.nuxtjs.org/api/context/

async asyncData({params, $axios}){
            let [answer] = await Promise.all([
                $axios.get("/userpage/answer_list/"+params.name)
            ]);
            return {
                answerData: answer.data.data,
            }
        }

axios配置使用先更到這里。
如有疑問請留言授滓；或聯(lián)系郵箱：manbanzhen@qq.com
歡迎訪問：http://www.manbanzhen.top 琳水、http://www.ofus.ink
轉(zhuǎn)載請注明出處。