为了账号安全,请及时绑定邮箱和手机立即绑定

axios在vue中的使用

难度中级
时长 3小时43分
学习人数
综合评分9.43
58人评价 查看评价
9.3 内容实用
9.3 简洁易懂
9.7 逻辑清晰
  • axios并行请求,然后统一处理。

    axios.spread() 的参数个数等于axios的请求数。


    axios.all([
        axios.get('/data.json'),
        axiso.get('/city.json')
    ]).then(
        axios.spread((dataRes, cityRes) => {
            console.table(dataRes, cityRes)
        }
    )
    查看全部
    0 采集 收起 来源:并发请求

    2019-11-25

  • get请求  Query String http://img1.sycdn.imooc.com//5dcfc1060001447001960032.jpg

    post请求http://img1.sycdn.imooc.com//5dcfc11300017c6902170062.jpg

    查看全部
  • let formData = new FormData();

    for(let key in data){

    formData.append(key,value);

    }

    //表单提交

    axios.post("/post",formData).then(res=>{

    console.log(res);

    })


    查看全部
  • axios.post() 三个参数,分别是,url路径,请求的数据data,config

    data有两种:

    form-data 表单提交(图片、文件上传)

    application/json   

    查看全部
  • 注意真实项目中router.js里面路由的写法:

    {

          path: '/',

          name: 'HelloWorld',

          component: HelloWorld//第一种方式

        },

        {

          path: '/axios',

          name: 'axios',

          // component: Axios

          component:()=>import('../components/Axios')//第二种方式,按需引入真实项目使用

        }


    查看全部
  • axios.all([]).then(axios.spread(datdres,citydres)=>{})
    查看全部
    0 采集 收起 来源:并发请求

    2019-11-03

  • axios配置参数

    baseURL:'http://localhost:8080',//请求的域名,基本地址
    timeout:1000,//请求的超时时长,单位毫秒1000=1s
    url:'json/shouji.json'//请求的路径
    method:'get,put',//get,put,post,patch,delete请求方法
    headers:{
        token:''
    },//设置请求头
    params:{},//请求参数拼接在URL上
    data:{},//请求参数放在请求体

    可以设置参数的地方:

    1.axios全局配置

    axios.defaults.timeout=1000

    2.axios实例配置

    let instance=axios.create()//不设置.默认使用全局配置.

    instance.defaults.timeout=3000//可以在修改

    3.axios请求配置

    instance.get('/data.json',{timeout:5000})

    查看全部
  • axios实例

    类似数组创建方式两种:

     let instance = this.$http.create({

                    baseURL:'http://localhost:8080',

                    timeout:1000

                })

    为什么要创建axios实例:后端接口地址有多个,并且超时时长不一样

    查看全部
    1 采集 收起 来源:创建axios实例

    2019-11-01

  • 并发请求:同时进行多个请求,并统一处理返回值

    axios.all()

    axios.spread()

    查看全部
    0 采集 收起 来源:并发请求

    2019-11-01

  • axios请求方法:get,post,put,patch,delete

    get:获取数据

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

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

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

    delete:删除数据

    查看全部
  • axios的特性:

    1.支持Promise API

    2.拦截请求和响应

    3.转换请求数据和响应数据

    4.取消请求 5.自动转换json数据 6.客户端支持防御XSRF攻击


    查看全部
    1 采集 收起 来源:课程介绍

    2019-11-01

  • 取消正在进行的http请求

    查看全部
    0 采集 收起 来源:取消请求

    2019-08-29

  • 实际开发中一般添加同意的错误处理


    查看全部
    0 采集 收起 来源:错误处理

    2019-08-29

  • let instance = axios.create({

    baseURL:"http:localhost:8080",

    tieout:3000

    });

    instance.get('/data.json')

    超时报错401

    查看全部
    0 采集 收起 来源:创建axios实例

    2019-08-29

  • 后端接口地址有多个,并且超时时间不一样

    https://img1.sycdn.imooc.com//5d67c2930001679b08050509.jpg

    查看全部
    0 采集 收起 来源:创建axios实例

    2019-08-29

举报

0/150
提交
取消
课程须知
1.对vue有一定的了解 2.对ES6有一定的了解 3.对数据请求有一定的了解(如ajax)
老师告诉你能学到什么?
1. axios的基本用法; 2. axios的各种请求方法以及相关配置; 3. axios的拦截器,合并请求,取消请求; 4. 如何在项目中优雅的使用Axios。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!