AXIOS 常用請求方式總結

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]])