1.配置对象的详细说明

  • 什么是配置对象? config 就是配置对象
    • 官方文档中提到:
      Request Config
      {
      // url:指明请求去向
      url: '/user',

      // method:设置请求方法(get。post。put等..)
      method: 'get', // default

      //baseURL;设定url的基础结构,比如,我们在发送的时候写了好几次http://localhost:3000,这其实就是一个基础结构,这这时我们就可以将baseURL设置成这个值,然后在设置url的时候就子需要设置路径就可以了,axios内部会自动将baseURL和url做一个结合,想成最终的url结构(在项目中经常使用)
      baseURL: 'https://some-domain.com/api/',

      //transformRequest: :它可以对请求数据做一个处理,将处理完后的数据在向服务器发送
      transformRequest: [function (data, headers) {
      // Do whatever you want to transform the data

      return data;
      }],

      // transformResponse(对响应进行预处理):它可以对响应的结构做一些改变,改变完后,在用自定义的回调去处理这些结果
      transformResponse: [function (data) {
      // Do whatever you want to transform the data

      return data;
      }],

      //headers:设置头信息,在某些项目当中进行身份校验的时候,会要求你在头信息当中加入一些特殊的标识,然后来检验你的请求是否满足条件,这时就可以借助headers对请求头信息做一个控制
      headers: {'X-Requested-With': 'XMLHttpRequest'},

      //params: 这也是一个比较常用的参数,用来设定url参数的,比如我们要向服务端发送请求,在发送请求时需要在url后面传递参数如a=100&b=200,这时我们就可以在params中添加参数,切记params是一个对象(对象添加参数的方法)
      params: {
      ID: 12345
      },

      //paramsSerializer:这是一个参数序列化的配置对象,作用是对请求的参数做一个序列化,转化成一个字符串,用得比较少
      paramsSerializer: {
      indexes: null // array indexes format (null - no brackets, false - empty brackets, true - brackets with indexes)
      },

      //data:这是请求体设置,用的比较多,一般有两种形式可以设置,一种是对象形式,另一种是字符串形式,如果是对象形式,axios会将其转成一个json格式字符串进行传递;如果是字符串的话axios就直接传递,一般在形目中是看要求进行设置
      data: {
      firstName: 'Fred'
      },

      //timeout:超时时间,发送请求时,如果超过这个时间,这个请求就会取消,单位为ms
      timeout: 1000,

      //withCredentials:这个是在跨域请求时对cookie进行一个携带,false为不携带,如果是true的话,那么在跨域请求时可以讲cookie携带过去
      withCredentials: false,

      //adapter:可以对请求的识别器做一个设置,有两种,一种是发送ajax的,另一种是在node.js里面发送http请求的,两种不同的运行环境
      adapter: function (config) {
      /* ... */
      },

      //auth:对我们请求的基础做一个验证,可以在这里设置用户名和密码,用的相对性较少
      auth: {
      username: 'janedoe',
      password: 's00pers3cret'
      },

      //responseType:对响应体的结构做一个设置,默认值是一个json,即默认服务器返回的结果是一个json格式的
      responseType: 'json',

      //responseEncoding:响应结果的编码,一般默认是utf8
      responseEncoding: 'utf8',

      //xsrfCookieName 和 srfHeaderName:域请求时对cookie的名字做一个设置,对请求头信息做一个设置。这是一个安全设置,保证了请求是来自于我们的客户端而不是来自于一些未知的网站页面,起一个保护作用,为什么够实现保护作用呢?服务器在返回结果时,会给我们返回一个唯一的标识,下次我们在发送请求时,会连同这个标识发送过去,服务器认了之后,检测没有问题,在给我们响应。有一些网站页面中当中会加入一些链接,向我们的服务器去发送请求,如果不做唯一的标识去检验的话,那么可能这个页面发送过来的请求就会直接对我们的结果产生影响,那加入这个参数后,我们的客户端请求,其他的页面就不能发送请求了(因为他没有这个标识),这时就可以有效避免这个跨站攻击了
      xsrfCookieName: 'XSRF-TOKEN',
      xsrfHeaderName: 'X-XSRF-TOKEN',

      //onUploadProgress:上传时的回调
      onUploadProgress: function (progressEvent) {
      // Do whatever you want with the native progress event
      },

      //onDownloadProgress:下载时的回调
      onDownloadProgress: function (progressEvent) {
      // Do whatever you want with the native progress event
      },

      //maxContentLength:设置http响应体的最大尺寸,单位为字节
      maxContentLength: 2000,

      //maxBodyLength:请求体的最大内容
      maxBodyLength: 2000,

      //validateStatus:对响应结果的成功做一个设置(就是什么情况下认定它是成功的呢?)默认值为:响应代码大于等于200小于300
      validateStatus: function (status) {
      return status >= 200 && status < 300; // default
      },

      //maxRedirects:最大跳转次数,一般自能用于node.js种,前端的ajax用不到
      maxRedirects: 21,

      //socketPath:设定socket文件位置,作用是向dock的守护进程去发送请求的,也就是作数据转发,这里有一个优先级关系,如果你设置了socket这个文件位置,也设置了代理(proxy),会优先使用socket这个文件的配置
      socketPath: null,

      //httpAgent:对客户端的信息做一些配置,用的相对比较少
      httpAgent: new http.Agent({ keepAlive: true }),
      httpsAgent: new https.Agent({ keepAlive: true }),

      //proxy:设置我们的代理,这是一个非常有用的设置,是用在node.js服务端中的,一般在做爬虫的时候,你用一个ip去向目标服务器发送请求,抓取数据的话,很可能就会被别人进到你的ip,这时你就可以借助中间代理,疯狂的去切换,然后发送请求,就可以很好的获取别人服务器的数据,前端一般也用不到
      proxy: {
      protocol: 'https',
      host: '127.0.0.1',
      port: 9000,
      auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
      }
      },

      //proxy:设置我们的代理,这是一个非常有用的设置,是用在node.js服务端中的,一般在做爬虫的时候,你用一个ip去向目标服务器发送请求,抓取数据的话,很可能就会被别人进到你的ip,这时你就可以借助中间代理,疯狂的去切换,然后发送请求,就可以很好的获取别人服务器的数据
      cancelToken: new CancelToken(function (cancel) {
      }),

      //decompress:对响应结果做一个解压,只能用于node.js环境中设置,ajax不能进行设置
      decompress: true
      }

2.axios的其他方式发送请求:

axios(config): //通用/最本质的发任意类型请求的方式
axios(url[, config]): //可以只指定 url 发 get 请求
axios.request(config): //等同于 axios(config)
axios.get(url[, config]): //发 get 请求
axios.delete(url[, config]): //发 delete 请求
axios.post(url[, data, config]): //发 post 请求
axios.put(url[, data, config]): //发 put 请求
axios.defaults.xxx: //请求的默认全局配置
axios.interceptors.request.use(): //添加请求拦截器
axios.interceptors.response.use(): //添加响应拦截器
axios.create([config]): //创建一个新的 axios(它没有下面的功能)
axios.Cancel(): //用于创建取消请求的错误对象
axios.CancelToken(): //用于创建取消请求的 token 对象
axios.isCancel(): //是否是一个取消请求的错误
axios.all(promises): //用于批量执行多个异步请求
axios.spread(): //用来指定接收所有成功数据的回调函数的方法

这里只列举几样,其他的基本一致

1).发送get请求(axios.get(),这里用axios.request())

//发送 GET 请求
btns[0].onclick = function(){
// request方法与axios()方法使用一致
axios.request({
method:'GET',
url: 'http://localhost:3000/comments'
}).then(response => {
console.log(response);
})
}

2).发送post请求(axios.post())

//发送 POST 请求(与GET,PUT,Delet基本一致,参考基本使用)
btns[1].onclick = function(){
// axios()
axios.post(
'http://localhost:3000/comments',
{
"body": "happy!",
"postId": 2
}).then(response => {
// axios会自动将服务器返回结果进行jason解析,即将响应体转象返回
console.log(response);
})
}