axios-【與ajax區別+vue中使用】

一.axios與ajax區別

相同點：都是執行異步請求操作

不同點：

• 大小
  • axios體積小 只需在要使用的目錄下 npm install axios --save
  • ajax 需要導入jQuery【體積較大 只是為了ajax去引入是不值得的】
• 針對方向
  • axios 符合前端MVVM的浪潮
  • ajax 本身是針對MVC的編程
• 實現方法與返回值
  • axios 用promise技術實現對ajax技術的封裝  返回值是 promise
  • ajax   基於原生的XHR開發，XHR本身的架構不清晰，已經有了fetch的替代方案
• 對並發請求的封裝api

二.axios應用

　　1. 安裝axios 打開需要使用的路徑下的命令行

npm install axios --save

　　2. 在需要使用 axios 的地方導入

import axios from 'axios'

　　3. axios實例使用

• 創建實例
  
  • axios可直接使用 axios(config)　　但還是推薦創建實例，因為可以對實例進行單獨配置,下方講解

axios({
   url:'服務器url',
   method:'請求方式' ,
   params:{
     name:'cc',
     age:'18'      
   } 
}).then(res=>{
   console.log(res) 
})

 

• • axios.all([ ]) 一次執行多個請求【並發請求】

axios.all([axios({
        //第一個請求參數
    }), axios({
        //第二個請求參數
})])
 .then(results => {
    //返回值數組 分別是一與二請求的結果
    console.log(results)
 })

• • 設置默認配置【默認屬性 可在使用時省略 類似父類】

axios.defaults.baseURL = '默認路徑'
axios.defaults.timeout = 5000

 

***注意：method:get 請求參數對應 params:{ name:'cc'}

　　　    method:post 請求參數對應 data:{ name:'cc'}

　　4. 創建實例-配置

• 原因
  • 項目中要請求多個不同url獲取數據 因此每個的使用baseUrl 不一定相同。
  • axios是全局的 如果直接使用修改 很可能出現問題
• 使用
  • 調用axios.create(config)的 api實現創建實例-【其中config為上面的obj對象】

const instance = axios.create({
    baseURL : '請求路徑',
    timeout : 5000
}) 

 

 

三、應用於vue 封裝request方法

最后對其進行封裝requset函數-【為了直接在其他地方直接使用】（分三步）

• 創建實例
  • 　　放置默認配置 baseURL等
• 增加攔截器
  • 　　可以對訪問請求 與 響應攔截操作 對數據進行二次加工
• 返回網絡請求
  • 　　返回promise對象 完成封裝
  • 　　在外部使用.then()繼續實現下一步操作

export function request(config) {
    //1.創建axios實例
    const instance = axios.create({
        baseURL: '',
        timeout: 5000
    })
    
    //2.axios攔截器
    //2.1請求攔截
    instance.interceptors.request.use(config=>{
        //攔截操作
        return config    //必須返回回去 否則調用處取不到
    },err=>{
        //console.log(err)
    })
    //2.2響應攔截
    instance.interceptors.response.use(res=>{
        //攔截操作
        return res //必須返回回去 否則調用處取不到
    },err=>{
        //console.log(err)
    })
    
    //3發送真正的網絡請求【返回promise對象】
    return instance(config)
}