axios

axios请求方法:

get 获取数据

// 写法一 localhost:8080/data.json?id=12
axios.get('/data.json',{
  params:{
      id:12
  }
}).then(res=>{
    console.log(res)
})
// 写法二,别名写法
axios({
    method:'get',
    url:'/data.json',
    params:{
        id:12
    }
}).then(res=>{
    console.log(res)
})

post 提交数据(表单提交+文件上传)

// post  application/json请求
let data = {id:12}
axios({
    method:'post',
    url:'/post',
    data: data
}).then(res=>{
    console.log(res)
})
// post  form-data表单提交(图片、文件上传) 请求
let formData = new FormData()
// 手动创建一个formData格式的数据
for(let key in data){
  formData.append(key,data[key])
}
axios.post('/post',formData).then(
  res=>{
    console.log(res)
  }
)

put 更新数据(所有数据推送到后端)

patch 更新数据(只将修改的数据推送到后端)

delete 删除数据

并发请求(当一个页面需要请求多个接口,并同时处理返回值时)

axiso.all([
  axios.get('/data.json'),
  axios.get('/city.json')
]).then(
  axios.spead(
    (dataRes,cityRes)=>{
      console.log(dataRes,cityRes)
    }
  )
)

拦截器:在请求或者响应被处理前拦截它们

http request 请求拦截器

axios.interceptors.request.use(
    config => {
        // 在发送请求前做些什么,比如加时间戳,加token
        config.headers.token = ' '
        return config;
    },
    error => {
        // 对请求错误时做些什么
        //常见的http错误状态码401超时,404找不到
        return Promise.reject(error);
    }
);

http response 响应拦截器

axios.interceptors.response.use(
    res => {
        // 请求成功后对响应数据做点什么
        return res.data;  //此处的res.data会到axios.get().then(res=>{})这里的res
    },
    error => {
        // 对响应错误做点什么
        //一般http状态码500系统错误,502系统重启
        return Promise.reject(error)
    }
)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容