英文原文鏈接

GET 請求

// Make a request for a user with a given ID axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// Optionally the request above could also be done as axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});axios({method: 'get',url: 'http://bit.ly/2mTM3nY',responseType: 'stream' }).then(function(response) {response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) });

POST 請求

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// Send a POST request axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'} });

并行請求

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) {// Both requests are now complete}));

創建實例

var instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'} });

Response

axios.get('/user/12345').then(function(response) {console.log(response.data);console.log(response.status);console.log(response.statusText);console.log(response.headers);console.log(response.config);});

Config

// Global axios defaultsaxios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// Custom instance defaults// Set config defaults when creating the instance var instance = axios.create({baseURL: 'https://api.example.com' });// Alter defaults after instance has been created instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;// Config order of precedence// Create an instance using the config defaults provided by the library // At this point the timeout config value is `0` as is the default for the library var instance = axios.create();// Override timeout default for the library // Now all requests will wait 2.5 seconds before timing out instance.defaults.timeout = 2500;// Override timeout for this request as it's known to take a long time instance.get('/longRequest', {timeout: 5000 });

攔截器

// Intercept request/responses// Add a request interceptor axios.interceptors.request.use(function (config) {// Do something before request is sentreturn config;}, function (error) {// Do something with request errorreturn Promise.reject(error);});// Add a response interceptor axios.interceptors.response.use(function (response) {// Do something with response datareturn response;}, function (error) {// Do something with response errorreturn Promise.reject(error);});// Remove interceptorvar myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);// Custom instance interceptorsvar instance = axios.create(); instance.interceptors.request.use(function () {/*...*/});

錯誤處理

// Catch erroraxios.get('/user/12345').catch(function (error) {if (error.response) {// The request was made and the server responded with a status code// that falls out of the range of 2xxconsole.log(error.response.data);console.log(error.response.status);console.log(error.response.headers);} else if (error.request) {// The request was made but no response was received// `error.request` is an instance of XMLHttpRequest in the browser and an instance of// http.ClientRequest in node.jsconsole.log(error.request);} else {// Something happened in setting up the request that triggered an Errorconsole.log('Error', error.message);}console.log(error.config);});// Custom HTTP status code erroraxios.get('/user/12345', {validateStatus: function (status) {return status < 500; // Reject only if the status code is greater than or equal to 500} })

取消請求

// Cancel request with cancel tokenvar CancelToken = axios.CancelToken; var source = CancelToken.source();axios.get('/user/12345', {cancelToken: source.token }).catch(function(thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// handle error} });axios.post('/user/12345', {name: 'new name' }, {cancelToken: source.token })// cancel the request (the message parameter is optional) source.cancel('Operation canceled by the user.');// Create cancel tokenvar CancelToken = axios.CancelToken; var cancel;axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {// An executor function receives a cancel function as a parametercancel = c;}) });// cancel the request cancel();

我想知道掘金的讀者是不是只收藏不看文章。看到這句話回復1

總結

以上是生活随笔為你收集整理的Axios 作弊表（Cheat Sheet）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。