jQuery 中的 AJAX

jQuery 中有一套專門(mén)針對(duì) AJAX 的封裝世澜，功能十分完善硬贯。
參考網(wǎng)址：jQuery 參考手冊(cè) - Ajax (w3school.com.cn)

$.ajax() 方法（傳入對(duì)象格式參數(shù)）

快捷請(qǐng)求方法

$.get(url, data, callback)：GET 請(qǐng)求快捷方法
$.post(url, data, callback)：POST 請(qǐng)求快捷方法

url：請(qǐng)求地址；data：需要傳遞到服務(wù)器的數(shù)據(jù)毕贼；callback：回調(diào)函數(shù)

更改與刪除請(qǐng)求

• put 請(qǐng)求温赔，更改數(shù)據(jù)

    // 以下為拉勾教育課件內(nèi)代碼
    $.ajax({
      // comments為接口，接口之后要傳入所需要修改的數(shù)據(jù) id
      url: "http://localhost:3000/comments/4", 
      type: "put",
      dataType: "json",
      data: {"content": "good", "postId": 2},
      success: function (data) {
        console.log(data)  // 輸出修改后的數(shù)據(jù)對(duì)象
      }
    })

• delete 請(qǐng)求鬼癣，刪除數(shù)據(jù)

    // 以下為拉勾教育課件內(nèi)代碼
    $.ajax({
      url: "http://localhost:3000/comments/5",
      type: "delete",
      success: function (data) {
        console.log(data)  // 因?yàn)閯h除陶贼，所有輸出空對(duì)象
      }
    })

Axios

Axios 是目前應(yīng)用最為廣泛的 AJAX 封裝庫(kù)。
Axios 網(wǎng)址：axios中文網(wǎng) (axios-js.com)

Axios 庫(kù)

地址：https://unpkg.com/axios/dist/axios.min.js 在 html 中使用 script 標(biāo)簽引入待秃。

Axios API

可以通過(guò)向 axios() 傳遞相關(guān)配置來(lái)創(chuàng)建請(qǐng)求

• axios(config) config為對(duì)象格式的配置選項(xiàng)

    // 以下為拉勾教育課件內(nèi)代碼
    axios({
      url: "/comments",
      method: "post",
      baseURL: "http://localhost:3000",
      headers: {
        "Content-Type": "application/json"
      },
      timeout: 1000,
      data: {
        "postId": 3,
        "content": "better"
      }
    })

• axios(url, config) config 可選

    axios("http://localhost:3000/posts", {
      params: {
        id: 1
      }
    })

then 和 catch

axios() 
  .then(function (response) { 
    // 正常請(qǐng)求的響應(yīng)信息對(duì)象 response 
  }) 
  .catch(function (error) { 
    //捕獲錯(cuò)誤 
  })

全局配置默認(rèn)值

可以指定將被用在各個(gè)請(qǐng)求的配置默認(rèn)值枉氮，比如：
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

攔截器

攔截器可以在請(qǐng)求或響應(yīng)被 then 或 catch 處理前攔截它們。

可以通過(guò)添加請(qǐng)求攔截器在發(fā)現(xiàn)請(qǐng)求之前更改全局的默認(rèn)配置：

    // 使用攔截器暖庄，對(duì)請(qǐng)求進(jìn)行攔截處理
    axios.interceptors.request.use(function (config) {
      config.params = {
        id: 2
      }
      config.baseURL = "http://localhost:3000"
      return config
    })

可以通過(guò)響應(yīng)攔截器對(duì)全局的響應(yīng)數(shù)據(jù)進(jìn)行修改聊替，直接獲取想要的數(shù)據(jù)：

    // 對(duì)響應(yīng)進(jìn)行攔截
    axios.interceptors.response.use(function (response) {
      return response.data;
    })

快速請(qǐng)求方法

• axios.get(url[, config]) 獲取數(shù)據(jù)
• axios.post(url[, data[, config]]) 添加數(shù)據(jù)
• axios.delete(url[, config]) 刪除數(shù)據(jù)
• axios.put(url[, data[, config]]) 更改數(shù)據(jù)

    // get 請(qǐng)求
    axios.get("http://localhost:3000/users?id=2")
    axios.get("http://localhost:3000/users",{
      params: {
        id: 3
      }
    })
    // post 請(qǐng)求
    axios.post("http://localhost:3000/users",{
      "name": "nancy",
      "age": 19,
      "class": 2
    })