• get和 delete请求传递参数

  • 通过传统的url 以 ? 的形式传递参数
  • restful 形式传递参数
  • 通过params 形式传递参数

• post 和 put 请求传递参数

  • 通过选项传递参数
  • 通过 URLSearchParams 传递参数

  1. 发送get 请求

  axios.get('http://localhost:3000/adata').then(function(ret){ # 拿到 ret 是一个对象 所有的对象都存在 ret 的data 属性里面 // 注意data属性是固定的用法，用于获取后台的实际数据 // console.log(ret.data) console.log(ret) })

  2. get 请求传递参数

  2.1 通过传统的url 以 ? 的形式传递参数

  axios.get('http://localhost:3000/axios?id=123').then(function(ret){ console.log(ret.data) })

  2.2 restful 形式传递参数

  axios.get('http://localhost:3000/axios/123').then(function(ret){ console.log(ret.data) })

  2.3 通过params 形式传递参数

  axios.get('http://localhost:3000/axios', { params: { id: 789 } }).then(function(ret){ console.log(ret.data) }) #3 axios delete 请求传参 传参的形式和 get 请求一样 axios.delete('http://localhost:3000/axios', { params: { id: 111 } }).then(function(ret){ console.log(ret.data) })

  4 axios 的 post 请求

  4.1 通过选项传递参数

  axios.post('http://localhost:3000/axios', { uname: 'lisi', pwd: 123 }).then(function(ret){ console.log(ret.data) })

  4.2 通过 URLSearchParams 传递参数

  var params = new URLSearchParams(); params.append('uname', 'zhangsan'); params.append('pwd', '111'); axios.post('http://localhost:3000/axios', params).then(function(ret){ console.log(ret.data) })

  #5 axios put 请求传参 和 post 请求一样 axios.put('http://localhost:3000/axios/123', { uname: 'lisi', pwd: 123 }).then(function(ret){ console.log(ret.data) })

配置公共的请求头

axios.defaults.baseURL = 'api.example.com';

配置 超时时间

axios.defaults.timeout = 2500;

配置公共的请求头

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置公共的 post 的 Content-Type

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios 拦截器

• 请求拦截器
  • 请求拦截器的作用是在请求发送前进行一些操作
    • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
• 响应拦截器
  • 响应拦截器的作用是在接收到响应后进行一些操作
    • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

    1. 请求拦截器

    axios.interceptors.request.use(function(config) { console.log(config.url)

    1.1 任何请求都会经过这一步 在发送请求之前做些什么

    config.headers.mytoken = 'nihao';

    1.2 这里一定要return 否则配置不成功

    return config; }, function(err){ #1.3 对请求错误做点什么
    console.log(err) }) #2. 响应拦截器 axios.interceptors.response.use(function(res) { #2.1 在接收响应做些什么
    var data = res.data; return data; }, function(err){ #2.2 对响应错误做点什么
    console.log(err) })