Axios

中文文件
http://axios-js.com/
https://www.runoob.com/vue2/vuejs-ajax-axios.ht=ml

配置全域性請求 URL

// 配置全域性請求 URL
axios.defaults.baseURL="http://localhost:8080";

GET

用於獲取資源

僅傳送請求體頭

axios.get("/student", {
    params: {
        name: "Lucy",
        age: 10,
        state: false,
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})

// 簡寫方式
axios.get("/student?name=Lucy&age=10&state=false")
    .then(res => {
        console.log(res)
    }).catch(err => {
        console.error(err);
    })
 

@GetMapping("/student")
public void test(String name,Integer age,Boolean state) {
    System.err.println("name="+name+" age="+age+" state="+state);
}

POST

用於傳送資源

僅傳送請求體 JSON

// 常用方式
axios.post("/student", {
    name: "Lucy",
    age: 10,
    state: false,
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})

//其它寫法
axios({
    method: 'post',
    url: '/student',
    data: {
        name: "Lucy",
        age: 10,
        state: false
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})

 

@RequestMapping("/student")
public void test(@RequestBody Student student) {
    System.err.println(student);
}

同時傳遞請求頭與請求體

axios({
    method: 'post',
    url: '/student',
    params: {
        message: "請求頭"
    },
    data: {
        name: "Lucy",
        age: 10,
        state: false
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})
 

@RequestMapping("/student")
public void test(String message,@RequestBody Student student) {
    System.err.println(message);
    System.err.println(student);
}

DELETE

用於刪除資源

僅傳送請求體 JSON

axios.delete('/student', {
    data: {
        name: "Lucy",
        age: 10,
        state: false
    }
}).then((response) => {
    console.log(error);
}).catch(function (error) {
    console.log(error);
});

@PutMapping("/student")
public void test(@RequestBody Student student) {
    System.err.println(student);
}

同時傳送請求頭與請求體

axios.delete('/student', {
    params: {
        message: "message~~"
    },
    data: {
        name: "Lucy",
        age: 10,
        state: false,
    }
}).then((response) => {
    console.log(error);
}).catch(function (error) {
    console.log(error);
});

@DeleteMapping("/student")
public void test(String message,@RequestBody Student student) {
    System.err.println(message);
    System.err.println(student);
}

PUT

用於完成的更新資源

僅傳送請求體 JSON

axios.put('/student', {
    name: "Lucy",
    age: 10,
    state: false,
}).then((response) => {
    console.log(error);
}).catch(function (error) {
    console.log(error);
});

@PutMapping("/student")
public void test(@RequestBody Student student) {
    System.err.println(student);
}

同時傳送請求頭與請求體

axios({
    method: 'put',
    url: '/student',
    params: {
        message: "message~~~"
    },
    data: {
        name: "Lucy",
        age: 10,
        state: false
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})

@PutMapping("/student")
public void test(String message,@RequestBody Student student) {
    System.err.println(message);
    System.err.println(student);
}

PATCH

用於更新區域性資源

僅傳送請求體 JSON

axios.patch('/student', {
    name: "Lucy",
    age: 10,
    state: false
}).then((response) => {
    console.log(error);
}).catch(function (error) {
    console.log(error);
});

@PatchMapping("/student")
public void test(@RequestBody Student student) {
    System.err.println(student);
}

同時傳送請求頭與請求體

axios({
    method: 'patch',
    url: '/student',
    params: {
        message: "message~~~"
    },
    data: {
        name: "Lucy",
        age: 10,
        state: false
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})

@PatchMapping("/student")
public void test(String message,@RequestBody Student student) {
    System.err.println(message);
    System.err.println(student);
}

AXIOS 的響應結構

{
  // `data` 由伺服器提供的響應
  data: {},
  // `status`  HTTP 狀態碼
  status: 200,
  // `statusText` 來自伺服器響應的 HTTP 狀態資訊
  statusText: "OK",
  // `headers` 伺服器響應的頭
  headers: {},
  // `config` 是為請求提供的配置資訊
  config: {}
}

通用請求方式

axios({
    //method 預設為 GET  [引數支援 GET POST DELETE HEAD OPTIONS PUT PATCH}
    method: 'get',
    url: '/user',
    // 請求 API 的父路徑
    baseURL: 'https://some-domain.com/api/',
    params: {
        ID: 12345
    },
    // data 作為請求主體被髮送的 JSON 資料 只適用於這些請求方法 'PUT', 'POST', 'PATCH'
    data: {
        firstName: 'Fred'
    },
    // timeout 指定請求超時的毫秒數(0 表示無超時時間)
    timeout: 1000
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})

併發執行請求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 兩個請求現在都執行完成
  }));

支援請求方法的別名

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