Nuxt引入axios；AXIOS的模塊化封裝

Nuxt直接引入axios，並模塊化請求

一、npm安裝

npm install axios

二、創建Axios擴展文件

/api/request.js 主要有以下內容

1、創建axios實例；

2、增加request攔截器,在請求發出前做自定義處理,比如加上token,sessionID ；

3、增加response攔截器,收到響應信息后判斷響應狀態,如果出錯可以使用Message組件提示 - PS:在AsyncData方法中調用時,在服務器端執行,沒有UI,所以無法進行UI展示提示.所以需要通過 context 的 process.server 變量判斷當前環境是不是服務器

request.js 內容如下

/**  * 封裝Axios  * 處理請求、響應錯誤信息  */
import { Message } from 'element-ui'
import axios from 'axios' //引用axios  
// create an axios instance 
const service = axios.create({
    baseURL: 'https://api.xxxxx.com',
    // nginx轉發到后端Springboot 
    withCredentials: true,
    // send cookies when cross-domain requests 
    timeout: 5000
    // request timeout
}) // request interceptor 
service.interceptors.request.use(config => {
    // do something before request is sent  
    //
    config.headers['Content-Type'] = 'application/json'
    // config.headers['-Token'] = getToken()
    return config
}, error => {
    // do something with request error 
    console.log(error)
    // for debug  
    return Promise.reject(error)
}) // response interceptor 
service.interceptors.response.use(
  /**  * If you want to get http information such as headers or status  * Please return  response => response  */
  /**  * Determine the request status by custom code  * Here is just an example  * You can also judge the status by HTTP Status Code  */

  response => {
    const res = response.data
    //res is my own data  
    if (res.code === 2000) {
      // do somethings when response success  
      //   Message({  
      //     message: res.message || '操作成功',  
      //     type: 'success', 
      //     duration: 1 * 1000 
      //   })  return res } else { 
      // if the custom code is not 200000, it is judged as an error.  
      return Promise.resolve(res)
      
    }
    else{
        Message({
            message: res.msg || 'Error',
            type: 'error',
            duration: 2 * 1000
         })
      return Promise.reject(new Error(res.msg || 'Error'))
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({ message: error.message, type: 'error', duration: 5 * 1000 })
    return Promise.reject(error)
  }
)
export default service //導出封裝后的axios

三、創建API接口文件

創建API接口文件,抽出所有模塊的異步請求 - 將同模塊的請求寫在一起,將ajax請求和頁面隔離 - 如果后端API調整,只需要修改對應接口文件； /api/data.js

import request from './request'

// 獲取優化方案留言
export function getPlaneFun(parmars) {
    return request({
        url: '/consult_api/guestBook/add',
        method: 'post',
        data: parmars
    })
}

四、組件中使用

1、第一中使用方式；這種方式實現了SSR服務端渲染數據

這種方式中，async asyncData 中不能使用 this，所以這里如果想要動態的參數，可以通過 context 獲取路由上邊的參數，但是只能獲取路由的參數；

這種方法請求只能在頁面中，不能再組件中使用

import { getConst, getConstRead } from '~/api/data' 
export default {
    async asyncData(ctx) { 
        let pageNum = parseInt(ctx.route.params.page);
        let params = {
            pageSize: 10,
            pageNum: pageNum
        };
        return getConst(params)
        .then((data) => { 
            return { 
                inforList: data.body
            }
        })
    }      
}

2、第二種使用方式，此方法只引入axios就行

import axios from 'axios'

mounted(){
       this.getData();
},
methods: {
       async getData () {
            let { data } = await axios({
                withCredentials: true,
                method: 'post',
                url: 'http:xxxx',
                data: {
                    pageSize: this.pageSize
                }
            })
            this.inforList = data.body
       }
}

3、第三種繼續使用封裝模塊，原理同第二種一樣只是請求的時候使用 模塊化請求；同樣沒有做到服務端渲染

4、多請求的寫法

async asyncData(ctx) { 
        let params = {
            pageSize: 3
        };
        let paramsAso = {
            pageSize: 6
        };
       
        let [data, dataAso] = await Promise.all([
            axios.post('https://api.x.com/consult_api/consult/page', params),
            axios.post('https://api.x.com/consult_api/consult/page', paramsAso)
        ])
        return {
            newsList: data.data.body.list,
            asoList: dataAso.data.body.list
        }
    },

 

 

問題BUG：

　　上邊第一種請求方法用的是：模塊化的請求的，這種會有另外一種問題就是，頁面不能手動刷新，因為SSR是服務端渲染，這種模塊化的手動刷新會崩潰掉；解決辦法，將請求路徑寫為固定的，也就是說固定死

async asyncData(ctx) { 
        let pageNum = parseInt(ctx.route.params.page);
        let params = {
            pageSize: 10,
            pageNum: pageNum
        };
        let { data } = await axios({
            withCredentials: true,
            method: 'post',
            url: 'https://api.xxxxx.com/consult_api/consult/page',
            data: params
        })
        return {
            inforList: data.body,
            totalPage: data.body.totalPage * 10,
            pageNum
        }
    }