Cara menghantar permintaan axios dalam tindak balas

Cara menghantar permintaan axios dalam reaksi: 1. Pasang axios melalui arahan "npm install axios --save"; 2. Gunakan skrip taip untuk mengimport kebergantungan axios dalam fail react; Hanya buat permintaan GET menggunakan "axios(config { ... })".

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk menghantar permintaan axios dalam tindak balas?

Cara biasa untuk menggunakan axios untuk menghantar permintaan dalam React

Pasang dan perkenalkan kebergantungan axios dalam React

Gunakan permintaan axios dalam projek React , mula-mula anda perlu memasang axios:

npm install axios --save

Kemudian gunakan skrip taip untuk mengimport kebergantungan aksios dalam fail tindak balas:

import axios from 'axios';

Gunakan axios untuk permintaan GET

Gunakan dalam axios Terdapat dua cara untuk membuat permintaan GET:

• Satu adalah menggunakan axios.get

• Yang lain ialah menggunakan axios( config { ... }) kaedah

Gunakan kaedah axios.get

Format biasa untuk meminta menggunakan axios.get terkapsul adalah seperti berikut :

// Make a request for a user with a given ID
axios.get('/getUser?id=12345')
  .then(function (response) {
    // handle success
    console.log(response);
 
    // update state or do something
    this.setState({
      // ...
    })
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });
 
// Optionally the request above could also be done as
axios.get('/getUser', {
    params: { // 这里的参数设置为URL参数（根据URL携带参数）
      id: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  
 
// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/getUser?id=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Gunakan axios(config {...})

Gunakan axios(config {...}) untuk menghantar permintaan GET dalam perkara berikut format:

axios({
  method: 'get',
  url: '/getUser',
  params: {
    id: 12345,
  }
})
  .then(function (response) {
    console.log(response);
  });

URL yang dihantar oleh yang di atas mendapat permintaan adalah seperti berikut:

http:HOST_IP:XXXX/getUser?id=12345

Gunakan axios untuk melaksanakan permintaan POST

Sama seperti permintaan GET, Terdapat juga dua kaedah permintaan menggunakan POST.

Gunakan axios.post

axios.post('/createUser', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Gunakan axios(config {...})

    // Send a POST request
    axios({
      method: 'post',
      url: '/createUser',
      data: { // 这里data中的参数为requestBody参数，服务端需要使用@RequestBody注解进行获取
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    }).then(function (response) {
      console.log(response);
    }).catch(function (error) {
      console.log(error);
    });

Perlu diambil perhatian bahawa apabila menggunakan axios(config {} ) kaedah untuk menghantar permintaan GET atau POST, params dalam permintaan GET ialah parameter URL dan data dalam permintaan POST ialah parameter RequestBody Anotasi @RequestBody perlu digunakan pada bahagian pelayan untuk menerimanya dan Spring Boot boleh menghuraikannya secara automatik ke dalam objek Java yang sepadan.

Hantar berbilang permintaan pada masa yang sama

Menggunakan axios, anda juga boleh menghantar berbilang permintaan pada satu masa:

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
  }));

Item konfigurasi objek konfigurasi terperinci

Dalam axios Dalam dokumen readme, terdapat arahan konfigurasi khusus untuk objek konfigurasi, seperti berikut:

{
  // `url` is the server URL that will be used for the request
  url: '/user',
 
  // `method` is the request method to be used when making the request
  method: 'get', // default
 
  // `baseURL` will be prepended to `url` unless `url` is absolute.
  // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
  // to methods of that instance.
  baseURL: 'https://some-domain.com/api/',
 
  // `transformRequest` allows changes to the request data before it is sent to the server
  // This is only applicable for request methods 'PUT', 'POST', 'PATCH' and 'DELETE'
  // The last function in the array must return a string or an instance of Buffer, ArrayBuffer,
  // FormData or Stream
  // You may modify the headers object.
  transformRequest: [function (data, headers) {
    // Do whatever you want to transform the data
 
    return data;
  }],
 
  // `transformResponse` allows changes to the response data to be made before
  // it is passed to then/catch
  transformResponse: [function (data) {
    // Do whatever you want to transform the data
 
    return data;
  }],
 
  // `headers` are custom headers to be sent
  headers: {'X-Requested-With': 'XMLHttpRequest'},
 
  // `params` are the URL parameters to be sent with the request
  // Must be a plain object or a URLSearchParams object
  params: {
    ID: 12345
  },
 
  // `paramsSerializer` is an optional function in charge of serializing `params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
 
  // `data` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
  // When no `transformRequest` is set, must be of one of the following types:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream, Buffer
  data: {
    firstName: 'Fred'
  },
  
  // syntax alternative to send data into the body
  // method post
  // only the value is sent, not the key
  data: 'Country=Brasil&City=Belo Horizonte',
 
  // `timeout` specifies the number of milliseconds before the request times out.
  // If the request takes longer than `timeout`, the request will be aborted.
  timeout: 1000, // default is `0` (no timeout)
 
  // `withCredentials` indicates whether or not cross-site Access-Control requests
  // should be made using credentials
  withCredentials: false, // default
 
  // `adapter` allows custom handling of requests which makes testing easier.
  // Return a promise and supply a valid response (see lib/adapters/README.md).
  adapter: function (config) {
    /* ... */
  },
 
  // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
  // This will set an `Authorization` header, overwriting any existing
  // `Authorization` custom headers you have set using `headers`.
  // Please note that only HTTP Basic auth is configurable through this parameter.
  // For Bearer tokens and such, use `Authorization` custom headers instead.
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
 
  // `responseType` indicates the type of data that the server will respond with
  // options are: 'arraybuffer', 'document', 'json', 'text', 'stream'
  //   browser only: 'blob'
  responseType: 'json', // default
 
  // `responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // default
 
  // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
  xsrfCookieName: 'XSRF-TOKEN', // default
 
  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default
 
  // `onUploadProgress` allows handling of progress events for uploads
  // browser only
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
 
  // `onDownloadProgress` allows handling of progress events for downloads
  // browser only
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
 
  // `maxContentLength` defines the max size of the http response content in bytes allowed
  maxContentLength: 2000,
 
  // `validateStatus` defines whether to resolve or reject the promise for a given
  // HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
  // or `undefined`), the promise will be resolved; otherwise, the promise will be
  // rejected.
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },
 
  // `maxRedirects` defines the maximum number of redirects to follow in node.js.
  // If set to 0, no redirects will be followed.
  maxRedirects: 5, // default
 
  // `socketPath` defines a UNIX Socket to be used in node.js.
  // e.g. &#39;/var/run/docker.sock&#39; to send requests to the docker daemon.
  // Only either `socketPath` or `proxy` can be specified.
  // If both are specified, `socketPath` is used.
  socketPath: null, // default
 
  // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
  // and https requests, respectively, in node.js. This allows options to be added like
  // `keepAlive` that are not enabled by default.
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
 
  // `proxy` defines the hostname and port of the proxy server.
  // You can also define your proxy using the conventional `http_proxy` and
  // `https_proxy` environment variables. If you are using environment variables
  // for your proxy configuration, you can also define a `no_proxy` environment
  // variable as a comma-separated list of domains that should not be proxied.
  // Use `false` to disable proxies, ignoring environment variables.
  // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and
  // supplies credentials.
  // This will set an `Proxy-Authorization` header, overwriting any existing
  // `Proxy-Authorization` custom headers you have set using `headers`.
  proxy: {
    host: &#39;127.0.0.1&#39;,
    port: 9000,
    auth: {
      username: &#39;mikeymike&#39;,
      password: &#39;rapunz3l&#39;
    }
  },
 
  // `cancelToken` specifies a cancel token that can be used to cancel the request
  // (see Cancellation section below for details)
  cancelToken: new CancelToken(function (cancel) {
  })
}

tindak balas objek nilai pulangan axios

Format objek tindak balas yang diperoleh oleh axios selepas membuat permintaan adalah seperti berikut:

{
  // `data` is the response that was provided by the server
  data: {},
 
  // `status` is the HTTP status code from the server response
  status: 200,
 
  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',
 
  // `headers` the HTTP headers that the server responded with
  // All header names are lower cased and can be accessed using the bracket notation.
  // Example: `response.headers['content-type']`
  headers: {},
 
  // `config` is the config that was provided to `axios` for the request
  config: {},
 
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance in the browser
  request: {}
}

Apabila menggunakan kaedah kemudian selepas permintaan, anda boleh mendapatkan setiap nilai atribut objek tindak balas, di mana data ialah objek sepadan yang dikembalikan oleh pelayan:

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);
  });

Konfigurasi global axios

Apabila menggunakan axios, anda boleh membuat tetapan global untuk objek axios Tetapan ini akan digunakan pada semua permintaan axios dalam kelas javascript semasa di mana axios berada, seperti seperti tetapan berikut:

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

Konfigurasi contoh tunggal axios

Jika anda tidak perlu menetapkan aksios secara global, anda boleh menetapkan satu objek apabila menggunakan objek aksios, contohnya, seperti berikut:

// Set config defaults when creating the instance
const instance = axios.create({
  baseURL: 'https://api.example.com'
});
 
// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

Penggunaan pemintas aksios

Anda boleh menggunakan pemintas aksios untuk memintas permintaan sebelum menghantar permintaan atau sebelum membalas respons (kemudian kaedah ) dan buat tetapan tersuai, tentukan permintaan dan pemintas tindak balas Contoh pemintas adalah seperti berikut:

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
 
// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

Apabila anda perlu memadamkan pemintas, lakukan perkara berikut:

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

Anda boleh juga tambahkan pemintas yang ditakrifkan pada contoh axios tersuai:

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

Sebahagian daripada maklumat di atas dirujuk daripada dokumen axios Untuk butiran, lihat: https://github.com/axios/axios

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Cara menghantar permintaan axios dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!