Axios學習一

一、基本使用

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。Axios就是一個能夠發起HTTP請求的js庫。官網地址
由於Axios是基於ES6的Promise的，所以axios必須在支持ES6 Promise的環境下運行。
1.get請求示例

採用<script>引入axios庫
 <script type="text/javascript" src="../lib/axios.js"></script>
 
axios.get("http://localhost:8888/empno")
        .then(function (response) {
            console.info(response);
        })
        .catch(function (error) {
            console.info(error);
        })
        .finally(function () {
            console.info("不管前面執行的如何，這裏都會執行到!");
        });

運行結果如下：

可以看到，響應的結果包含以下幾個部分：

{
   config:{},
   //data就是服務端響應返回的數據
   data:{},
   //服務端所有的響應頭信息
   headers:{},
   request:...
   //來自於服務端的HTTP響應狀態碼
   status:200,
   statusText:""
}

get請求參數也可以寫成這樣

    axios.get("http://localhost:8888/empNo", {
        params: {
            empno: '7369'
        }
    })
        .then(function (response) {
            console.info(response.data);
        })
        .catch(function (error) {
            console.info(error);
        })
        .finally(function () {
            console.info("不管前面執行的如何，這裏都會執行到!");
        });
        //結果爲：
       {empno: 7369, ename: "SMITH", job: "CLERK", mgr: 7902, hiredate: "1980-12-17 00:00:00", …}
       不管前面執行的如何，這裏都會執行到!

2.post請求示例

    axios.post("http://localhost:8888/", {
        empno: '0591',
        ename: 'Tom',
        job: '程序員'
    })
        .then(function (response) {
            console.info(response.data);
        })
        .catch(function (error) {
            console.info(error);
        })
        .finally(function () {
            console.info("不管前面執行的如何，這裏都會執行到!");
        });
    /**
     * AJAX Post請求中常用的兩種傳參數的形式分別是Form Data 和 Request Payload
     * Request Payload 請求頭爲: Content-Type: application/json;charset=UTF-8，並且請求正文是一個 json 格式的字符串
     * Form Data  請求頭部爲: Content-Type: application/x-www-form-urlencoded，並且請求正文是類似 get 請求 url 的請求參數
     * 其他情況如使用原生AJAX的POST請求如果不指定請求頭Request Header，默認請求頭尾:Content-Type:text/plain;charset=UTF-8，參數出現在Request payload塊。
     *
     * 後端採用 Spring MVC框架開發的話
     * 對於 Request Payload 請求， 方法必須加 @RequestBody 註解才能將請求正文解析到對應的 bean 中，且只能通過 request.getReader() 來獲取請求正文內容
     * 對於 Form Data 請求，無需任何註解，Spring MVC會自動使用 MessageConverter(消息轉換器) 將請求參數解析到對應的 bean，且通過 request.getParameter(...) 能獲取請求參數
     * axios的Post請求默認是Request Payload 請求
     */

後端代碼如下：

 /**
     * 保存員工信息
     *
     * @param request
     * @return
     */
    @PostMapping("/")
    public Map<String, Object> saveEmp(HttpServletRequest request, @RequestBody Emp emp) {
        Map<String, Object> result = new HashMap<>(8);
        empService.saveEmp(emp);
        result.put("status", "0");
        result.put("message", "保存成功");
        return result;
    }

執行結果如下:

默認情況下，axios將JavaScript對象序列化爲JSON。如果要以application/x-www-form-urlencoded格式發送數據，可以使用以下幾個方法(直接設置請求頭的Content-Type無效)：
方法一:

    axios({
        method: 'post',
        url: 'http://localhost:8888/',
        data: "empno=0593&ename=kaili&job=Teacher"
    }).then(function (response) {
        console.info(response.data);
    })

這樣請求頭爲：Content-Type: application/x-www-form-urlencoded 如下圖所示：

方法二：在特定瀏覽器中，你可以使用URLSearchParams API


    var searchParam = new URLSearchParams();
    searchParam.append("empno","0595");
    searchParam.append("ename","LILi");
    searchParam.append("job","程序媛");
    
    axios({
        method: 'post',
        url: 'http://localhost:8888/emp',
        data: searchParam
    }).then(function (response) {
        console.info(response.data);
    })

方法三:使用qs庫對數據進行序列化
方法四：在NodeJs環境中你可以使用querystring模塊
後端代碼如下：

   @PostMapping("/emp")
    public Map<String, Object> saveEmp(HttpServletRequest request) {

        String empno = request.getParameter("empno");
        String ename = request.getParameter("ename");
        String job = request.getParameter("job");


        Emp emp = new Emp();
        emp.setJob(job);
        emp.setEname(ename);
        emp.setEmpno(Integer.valueOf(empno));

        empService.saveEmp(emp);

        Map<String, Object> result = new HashMap<>(8);
        result.put("status", "0");
        result.put("message", "保存成功");
        return result;
    }

二、axios常用API

1.可以通過將相關配置參數傳遞給axios來發出請求
基本調用方式爲: axios(config),例如發送一個Post請求如下：

axios({
        method: 'post',
        url: 'http://localhost:8888/',
        data: {
            empno: '0592',
            ename: 'Cat',
            job: '測試人員'
        }
    }).then(function (response) {
        console.info(response.data);
    })
        .catch(function (error) {
            console.info(error);
        })
        .finally(function () {
            console.info("不管前面執行的如何，這裏都會執行到!");
        });

默認發送Get請求,如下:

    axios("http://localhost:8888/empno");

2.爲了方便起見，axios爲所有受支持的HTTP請求方法提供了別名。

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

三、請求配置屬性

這些是用於發出請求的可用配置選項。只需要url。如果沒有指定方法，請求將默認爲GET

{
 url:'xxx',
 //指定 在發出請求時使用的請求方法
  method: 'get', // 默認get請求
  //可以方便地爲axios的實例設置' baseURL '來傳遞相對url
  baseURL: 'https://some-domain.com/api/',
  //“transformRequest”允許在請求數據發送到服務器之前對其進行更改
  //這隻適用於“PUT”、“POST”、“PATCH”和“DELETE”請求方法
  //數組中的最後一個函數必須返回一個字符串或Buffer的實例ArrayBuffer，FormData或流
  //您也可以修改headers對象。
  transformRequest: [function (data, headers) {
    // Do whatever you want to transform the data

    return data;
  }],
  //“transformResponse”允許更改之前的響應數據
  //它將被傳遞給then/catch綁定的函數
 transformResponse: [function (data) {
    // Do whatever you want to transform the data

    return data;
  }],
  // “headers”是要發送的自定義請求頭
   headers: {'X-Requested-With': 'XMLHttpRequest'},
   //“params”是與請求一起發送的URL參數
   //必須是普通對象或者是URLSearchParams對象
    params: {
    ID: 12345
  },
   paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

//“data”是作爲請求體發送的數據
//只適用於“PUT”、“POST”和“PATCH”請求方法
//當沒有設置“transformRequest”時，必須是以下類型之一:
//- string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
//瀏覽器中僅爲：FormData, File, Blob對象
//NodeJs環境中僅爲：Stream, Buffer對象
 data: {
    firstName: 'Fred'
  },
  //“timeout”指定請求超時之前的毫秒數。
  //如果請求花費的時間超過“tiemout”值，請求將被中止。
  timeout: 1000, //默認值爲' 0 '(沒有超時)
  //指示是否跨站點訪問控制請求
  //應該使用憑證
  withCredentials: false, // default,
  adapter: function (config) {
    /* ... */
  },
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
  //'表示服務器將響應的數據類型
  //可選值爲：'arraybuffer', 'document', 'json', 'text', 'stream'
   responseType: 'json', // default
   //指示用於解碼響應的編碼
 responseEncoding: 'utf8', // default
 xsrfCookieName: 'XSRF-TOKEN', // default
  xsrfHeaderName: 'X-XSRF-TOKEN', // default
  //允許處理上傳的進度事件
 onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  //允許處理下載的進度事件
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  //定義允許的http響應內容的最大大小(以字節爲單位)
 maxContentLength: 2000,
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },
//定義在node.js中要遵循的最大重定向數。
 maxRedirects: 5, // default
 socketPath: null, // default
//“httpAgent”和“httpsAgent”定義了一個執行http時使用的自定義代理
//和https請求，分別在node.js中。這允許像這樣添加選項
//默認情況下未啓用的“keepAlive”。
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
  
//“proxy”定義代理服務器的主機名和端口。
//您還可以使用傳統的“http_proxy”和“https_proxy”環境變量。
 proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
//指定可用於取消請求的取消令牌
cancelToken: new CancelToken(function (cancel) {
  })
}

四、配置全局默認值

您可以指定將應用於每個請求的配置缺省值。

axios.defaults.baseURI = "";
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.timeout=3000;

五：攔截器

您可以在處理請求或響應之前攔截它們。
(1)添加一個請求攔截器

    axios.interceptors.request.use(function (config) {
        //在發送請求之前做些什麼
        //TODO
        return config;
    }, function (error) {
        //處理請求錯誤
        return Promise.reject(error);
        //alert("請求超時")
    });

(2)添加一個響應攔截器

    axios.interceptors.response.use(function(response){
       //處理響應數據
        return response;
    },function(error){
        //處理響應錯誤
        return Promise.reject(error);
    });

(3)如果以後需要刪除攔截器，可以這樣做。

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

六、處理錯誤

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 發出請求後，服務器用狀態代碼進行響應
      //錯誤的狀態代碼不在2xx的範圍內
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 已提出請求，但未收到答覆
      // `error.request` 是瀏覽器中XMLHttpRequest的一個實例，也是
      // NodeJS中的http.ClientRequest 
      console.log(error.request);
    } else {
      // 在設置引發錯誤的請求時發生了一些事情
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

一、基本使用

二、axios常用API

三、請求配置屬性

四、配置全局默認值

五：攔截器

六、處理錯誤

SpringBoot2.x學習-數據源(HikariCP和Druid)和JdbcTemplate

SpringBoot2.x學習-集成Mybatis框架

SpringBoot2.x學習-集成MyBatis-Plus

EasyUI中使用Layui

SpringMVC-ResponseBodyAdvice學習

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結